命名网格线必须用方括号包裹且前后有空格，如[main-start]；引用时须严格大小写匹配、无多余空格；同一位置可多别名，重复线名自动编号；命名线需在grid-template-columns/rows中显式定义，不与grid-template-areas混用。
命名网格线必须用方括号包裹，且前后有空格
浏览器只认 [name] 这种带空格包围的写法。写成 1fr[name] 或 [name]1fr 会被整条忽略，容器退化为普通块级元素，不报错也不提示——这是最常导致“定位失效”的静默原因。
合法写法只有这几种：
-
1fr [main-start] 2fr [main-end] 1fr（名字夹在轨道之间） -
[sidebar-start] 240px [sidebar-end main-start] 1fr [main-end]（同一位置多个名字，空格分隔） -
repeat(3, [col] 1fr)（批量生成[col-1]、[col-2]、[col-3]）
引用命名线时必须带方括号，大小写严格匹配
子元素写 grid-column: main-start / main-end 是无效的，等价于 auto / auto，项目只占一列，DevTools 里也看不出异常。正确写法是：
-
grid-column: [main-start] / [main-end]✅ -
grid-row: [header-start] / [footer-end]✅（前提是该名在grid-template-rows中定义过） -
grid-column: [Main-start]❌（大小写不一致，定义是[main-start]就必须全小写） -
grid-column: [main-start] / [main-end]❌（斜杠前后多了一个空格，会失效）
同一位置支持多个别名，但需注意默认取第一个
比如 [sidebar-start main-start] 写在同一处，后续用 grid-column: [sidebar-start] 和 grid-column: [main-start] 都能命中——它们指向同一条列线。但若该名重复出现多次（如两处都写了 [header-start]），浏览器会自动编号为 header-start-1、header-start-2，而裸写 [header-start] 默认取第一个。
实际开发中建议显式加数字后缀，避免歧义：
-
[header-start-1]和[header-start-2] -
[chart-col-start-1]和[chart-col-start-2]
命名线只在显式模板中生效，不能和 grid-template-areas 混用
grid-template-areas 定义的是区域（area），不是网格线。写 "header header" "main aside" 不会自动生成 [header-start] 这类线——边界线仍需在 grid-template-columns 或 grid-template-rows 中显式命名。
二者可以联动，但条件苛刻：
- 区域名和线名拼写、大小写、方向必须完全一致
- 线名必须出现在对应方向的模板中（列线名只能在
grid-template-columns里） - 如果某区域引用了不存在的线名，浏览器静默忽略该区域定义，降级为默认流
真正容易被忽略的一点：命名线本身不触发重排，但一旦改了某条线的位置（比如把 [main-start] 从第2列挪到第3列），所有依赖它的项目会立刻跳变，没有过渡效果。如有动画需求，得额外用 transition 控制其他属性（如 transform）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
