必须在grid-template-columns/rows中用空格包围的[name]语法声明命名网格线，否则整条声明静默失效；引用时须带方括号且大小写严格匹配，行列线隔离，重复命名自动编号。
必须在 grid-template-columns 或 grid-template-rows 的轨道定义中，用空格包围的 [name] 语法声明，否则名字不生效，整条模板声明会被浏览器静默丢弃。
grid-template-columns/rows 里怎么写 [name] 才合法
浏览器把 [name] 当作独立 token 解析，前后必须有空格，且不能和尺寸值粘连。
-
1fr [main-start] 2fr [main-end] 1fr✅ 合法：方括号前后有空格，紧贴轨道尺寸 -
[sidebar-start] 240px [content-start] 1fr✅ 合法：开头和中间命名，定义最左线与分界线 -
1fr[main-start]2fr❌ 静默失败：缺空格，整条grid-template-columns声明被忽略，容器退化为普通块级元素 -
["header"] 80px❌ 引号非法，名字被跳过 -
[1st-col] 1fr❌ 数字开头不合法，不生效 -
repeat(3, [col] 1fr)✅ 合法：批量生成col 1、col 2、col 3
引用命名线时为什么 grid-column: main-start / main-end 不起作用
漏掉方括号是最常见错误。裸名如 main-start 不是变量，浏览器会把它当关键字（比如 auto）处理，结果等价于 grid-column: auto / auto——元素只占一列，DevTools 里也看不出异常。
-
grid-column: [main-start] / [main-end]✅ 正确，斜杠前后都不能有空格 -
grid-column: main-start / main-end❌ 静默失败 -
grid-column: [Header-start]❌ 大小写敏感，定义时是[header-start]才有效 -
grid-row: [main-start]❌main-start是列线名，不能用于行方向属性 -
grid-column: [sidebar-start] / -1✅ 允许混用命名线与负向索引
命名线和 grid-template-areas 是两套机制，别混用
grid-template-areas 定义的是区域（area），不是网格线（line）。写 "header header" "main aside" 不会自动生成 [header-start] 这类线——它只是声明区域占位，边界线仍需显式命名。
-
.header { grid-area: header; }✅ 有效，绑定到区域 -
.main { grid-column: header / main; }❌header和main不是线名，无效 - 真要复用语义，得在
grid-template-rows里显式写：[header-start] 80px [header-end main-start] - 同一位置多个名字合法：
[sidebar-start sidebar-top]，后续任一都可引用
最容易被忽略的一点：命名线本身不占空间、不影响渲染，删掉所有 [name] 只要尺寸值不变，页面看起来一模一样——但它决定了你改布局时是改一行代码，还是满屏找数字、反复刷新调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
