命名轨道必须用空格包围的[name]语法声明，否则整条grid-template声明失效；引用时必须带方括号且大小写敏感；行列线隔离，需分别声明；重复命名生成带序号的线。
![怎样在css grid中实现网格线的自定义命名_使用方括号[line-name]定义名称](https://img.php.cn/upload/article/000/969/633/177949390729608.jpeg)
必须在 grid-template-columns 或 grid-template-rows 的轨道定义中，用空格包围的 [name] 语法声明，否则名字无效、布局静默失效。
命名位置和语法必须严格匹配解析规则
浏览器把 [name] 当作独立 token 处理，前后必须有空格。写成 1fr[main-start] 或 [main-start]1fr 都会被整个忽略——不是报错，而是整条 grid-template-columns 声明不生效，容器退化为普通块级元素。
-
1fr [main-start] 2fr [main-end] 1fr✅ 合法：方括号前后有空格，紧贴尺寸 -
[main-start] 1fr✅ 合法：开头命名，第一列左侧线为main-start -
1fr [sidebar-start sidebar-end] 1fr✅ 同一位置多个名，后续任一都可引用 -
repeat(3, [col] 1fr)✅ 自动生成col 1、col 2、col 3
引用时漏掉方括号 = 白写
裸名如 main-start 不是变量也不是类名，浏览器会把它当关键字（比如 auto 或 span）处理，结果就是 grid-column: auto / auto —— 元素只占一列，且不报任何警告。
-
grid-column: [main-start] / [main-end]✅ 正确 -
grid-column: main-start / main-end❌ 静默失败 -
grid-row: [header-start] / -1✅ 允许混用：命名线 + 负向索引 -
grid-column: [Header-start]❌ 大小写敏感，[header-start]才有效
行列线完全隔离，不能跨方向复用
在 grid-template-columns 里写的 [sidebar-start] 是列线，只能用于 grid-column-start 等列方向属性；用在 grid-row 上毫无效果，也不会报错，只是回退到默认行为。
立即学习“前端免费学习笔记（深入）”；
- 想让同一名字同时控制行列，必须分别在两个地方声明：
grid-template-columns: [sidebar-start];grid-template-rows: [sidebar-start]; -
grid-template-areas定义的是区域，不是线 ——"sidebar main"不会生成sidebar-start这条线 - 重复命名如
[item] 1fr [item] 1fr会生成item 1和item 2，引用时得写[item 2]才能选第二条
最常被忽略的一点：命名本身不占空间、不影响渲染，删掉所有 [name] 只要尺寸值不变，页面看起来一模一样——但它决定了你改布局时是改一行代码，还是满屏找数字、反复刷新调试。
