命名网格线是语义化布局核心，需在grid-template-columns/rows中用空格包围的[name]语法定义，引用时必须带方括号且大小写严格匹配，行列线隔离，重复命名自动编号，删掉名称不影响视觉但决定维护效率。
命名网格线不是“让代码变短”的语法糖，而是把布局意图从数字坐标（比如 grid-column: 2 / 4）转成语义锚点（比如 grid-column: main-start / main-end）。改布局时，你只动模板里的名字位置，所有引用它的地方自动对齐——这才是简化的核心。
grid-template-columns/rows 中怎么写方括号才不被忽略
浏览器把 [name] 当作独立 token 解析，前后必须有空格。任何紧贴尺寸的写法都会导致整条 grid-template-columns 声明失效，容器退化为普通块级元素，且不报错。
-
1fr [main-start] 2fr [main-end] 1fr✅ 合法：方括号前后有空格，紧贴轨道尺寸 -
[main-start] 1fr✅ 合法：开头命名，定义最左侧线 -
1fr[main-start]2fr❌ 静默失败：缺空格，整条声明被丢弃 -
1fr [main-start]2fr❌ 静默失败：[main-start]2fr被当做一个整体，非法
命名线引用时为什么 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-row: [main-start]❌ 无效：因为main-start是在grid-template-columns里定义的列线，不能用于行方向 -
grid-column: [Header-start]❌ 大小写敏感，必须和定义时完全一致（[header-start]）
重复命名、多命名和跨方向复用的边界情况
同一名称可多次出现，Grid 会自动编号（sidebar 1、sidebar 2），但直接写 sidebar 永远取第一个；同一位置多个名字合法，但行列线必须分别声明，不能混用。
立即学习“前端免费学习笔记（深入）”；
-
1fr [sidebar-start sidebar-top] 2fr✅ 同一位置两个名字，后续任一都可引用 -
grid-template-columns: [sidebar-start]; grid-template-rows: [sidebar-start];✅ 想让同一名字控制行列，必须两边都定义 -
repeat(3, [col] 1fr)✅ 生成三条名为col的线，引用需写[col 2]才能选第二条 -
grid-template-areas: "header header" "main aside";❌ 不会生成header-start这类线，grid-area和命名线是两套机制
最容易被忽略的是：命名线本身不占空间、不影响渲染，删掉所有 [name] 只要尺寸值不变，页面看起来一模一样——但它决定了你改布局时是改一行代码，还是满屏找数字、反复刷新调试。
