grid-template-areas 不能定义网格线名，线名必须在 grid-template-rows/columns 中用方括号语法声明，引用时也必须加方括号，如 [name]，裸名会被忽略或报错。
grid-template-areas 不能替代 grid-line-names，别混用
很多人想用 grid-template-areas 给区域起名，就以为网格线也自动有了名字——其实不是。区域名（如 "header header"）只绑定到 grid-area，不生成任何行/列线名。真正控制线名的是 grid-template-rows 和 grid-template-columns 中的括号语法。
正确做法是在轨道定义里用括号包裹自定义名，多个名用空格分隔：
grid-template-columns: [start] 1fr [content-end sidebar-start] 2fr [end];
这条语句定义了三条列线：start、content-end 和 sidebar-start（共享同一位置）、end。注意：同一位置可有多个名，这在复用命名时很实用。
引用命名线时必须加方括号，漏掉就失效
用 grid-column-start、grid-row 等属性引用线名时，必须显式写成 [name]，不能直接写 name。浏览器会把裸名当成关键字（比如 auto、span）或忽略。
-
grid-column: content-end / end;→ ❌ 报错或回退为auto -
grid-column: [content-end] / [end];→ ✅ 正确 -
grid-column: [content-end] / -1;→ ✅ 允许混用（命名线 + 行号）
常见错误是复制示例时漏掉方括号，调试时发现布局没变化，其实是语法被静默忽略。
命名线支持重复、重叠和负向索引，但别过度设计
同一轨道可以有多个名字，例如：
grid-template-rows: [top nav-top] 60px [nav-bottom main-top] 1fr [main-bottom bottom];
这里 nav-top 和 top 指同一根线，nav-bottom 和 main-top 也同位。这种写法适合组件化场景（如导航模块导出自己的线名），但要注意：
- 名字冲突不会报错，后定义的同名线会覆盖前一个（按顺序）
- 用
grid-row: [main-top] / [main-bottom]比用行号2 / 3更健壮，因为增减轨道时不用改所有引用 - 负索引（如
[-1]）仍指向隐式末尾线，但和命名线混用时逻辑容易混乱，建议避免[main-top] / [-1]这类组合
调试命名线：用浏览器开发者工具看 computed 值
Chrome 和 Firefox 的 Elements 面板里，选中 grid 容器后，在 Styles 侧边栏展开 grid-template-columns 或 grid-template-rows，能看到带名字的完整解析。如果某条线没显示名字，说明定义语法有误（比如括号不匹配、空格缺失）。
更直接的方式是临时加一条测试规则：
grid-column: [debug-test] / [debug-test];
如果元素宽度塌缩为 0，说明 debug-test 名字未定义或拼写错误；如果正常显示，则名字已生效。
名字本身不占性能开销，但过多嵌套层级+大量命名线会让 CSS 可维护性下降——重点命那些会被多处引用的“关键锚点线”，比如 [sidebar-start]、[content-boundary]，而不是给每根线都起名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
