命名网格线只能作用于网格线而非轨道，必须在grid-template-columns/rows中紧贴尺寸用方括号声明，如[sidebar-start] 240px [sidebar-end]；引用时须成对且带方括号，如grid-column: [sidebar-start] / [sidebar-end]，否则静默失效。
不能给“轨道”设名称，只能给“网格线”设名称——这是最常被误解的前提。 所有说“给轨道命名”的人，实际想做的都是为轨道两侧的网格线赋予语义化标识，以便后续用 grid-column 或 grid-row 精准定位。
grid-template-columns/rows 中怎么写才算合法命名
命名必须出现在 grid-template-columns 或 grid-template-rows 的轨道定义中，且方括号 [name] 必须紧贴尺寸值前后，中间不能有空格隔开：
-
grid-template-columns: [sidebar-start] 240px [sidebar-end main-start] 1fr [main-end];✅ 同一位置可放多个名，空格分隔 -
grid-template-columns: [sidebar-start] 240px [sidebar-end] [main-start] 1fr;❌ 方括号离尺寸太远，整条声明被浏览器静默忽略 -
grid-template-columns: [1col] 1fr;❌ 数字开头不合法，名字无效 -
grid-template-columns: ["main"] 1fr;❌ 引号非法，直接跳过 -
grid-template-columns: repeat(3, [col] 1fr);❌repeat()外部不能套命名；正确写法是repeat(3, [col-start] 1fr [col-end])
引用时为什么加方括号是硬性要求
浏览器把裸名（如 main-start）当作 CSS 关键字处理（比如 auto、span），根本不会去查你定义的线名。漏掉方括号 = 声明失效，且不报错：
-
grid-column: main-start / main-end;❌ 等价于auto / auto，元素只占一列 -
grid-column: [main-start] / [main-end];✅ 正确，斜杠前后都必须带[] -
grid-row: [header-start] / 3;✅ 允许混用：命名线 + 行号 -
grid-row: [main-start];✅ 单写起点也合法，终点默认为下一条线（但容易误判跨距） -
grid-column: [header-start];❌ 若header-start是在grid-template-rows里定义的行线，这里就完全无效——行列线严格隔离
命名线和 grid-template-areas 完全不是一回事
很多人试图复用 grid-template-areas 里的名字来定位线，结果静默失败。区域名不会自动生成同名网格线：
立即学习“前端免费学习笔记（深入）”；
-
grid-template-areas: "header header" "main aside";→ 只创建header、main、aside这些区域名 -
.main { grid-column: header / main; }❌header和main不是列线名，无效 - 真要复用语义，得显式声明：
grid-template-rows: [header-start] 80px [header-end main-start] 1fr [main-end]; - 同一位置多个名字很实用，比如导航组件导出
[nav-top]，主内容区同时需要它作为[main-top]，写成[nav-top main-top]即可
最易被忽略的是：名字本身不占空间、不影响渲染，删掉所有方括号，只要尺寸值不变，视觉表现完全一致——但它决定了你改布局时，是不是还得手动数数字、挨个改二十处 grid-column: 2 / 4。一旦漏掉一个 [] 或大小写写错，DevTools 里看不出任何异常，元素就悄悄错位了。
