CSS Grid 中用 [name] 在 grid-template-rows/columns 中命名网格线，必须紧贴轨道尺寸、区分大小写、禁用非法字符；命名后可在 grid-row/column 中直接引用线名，重复命名会导致定位歧义，需注意兼容性与构建工具干扰。
grid-template-rows / columns 中用 [name] 命名网格线
CSS Grid 允许你在定义行或列轨道时，直接在尺寸值前后插入方括号，为相邻的网格线赋予自定义名称。这不是额外语法糖，而是标准声明的一部分，且必须紧贴轨道尺寸书写，不能有空格隔开。
常见错误是把名字写成 grid-row: [header-start] 1 / [header-end] 2 这种“后置命名”——它只对单个项生效，无法被其他元素复用；真正可复用的命名只能在 grid-template-rows 或 grid-template-columns 中声明。
-
grid-template-columns: [full-start] 1fr [main-start] 2fr [main-end] 1fr [full-end];—— 定义了 4 条垂直线，其中main-start和main-end可用于定位主内容区 - 同一根线可以有多个名字：
[sidebar-start sidebar-top]是合法的，后续可用任一名称引用 - 名字区分大小写，
Header和header是两条不同线 - 不能用数字、连字符开头，也不能包含空格或特殊符号（如
[col-1]合法，[1-col]或[my col]非法）
命名后如何在 grid-row / grid-column 中使用
一旦在模板中声明了线名，就可以像使用内置关键字（如 span、auto）一样，在项目级属性中直接引用。注意：这里引用的是「线名」，不是「区域名」，二者概念不同。
典型误用是混淆 grid-area: header（区域名）和 grid-column: header-start / header-end（线名）。前者需配合 grid-template-areas，后者依赖你之前在 grid-template-columns/rows 中定义的线名。
立即学习“前端免费学习笔记（深入）”；
- 单条线定位：
grid-row: main-start;表示起始行线为main-start，结束行为下一条线 - 跨多条线：
grid-column: full-start / full-end;等价于从第一条线到最末线 - 混用数字与名字：
grid-row: 2 / main-end;合法，Grid 会自动解析为第 2 条隐式线到名为main-end的显式线 - 名字未定义时，该声明会被整个忽略（不报错，但布局失效）
命名冲突与重复线名的实际影响
Grid 不禁止重复线名，但重复会导致定位歧义：当你写 grid-column: sidebar / sidebar;，浏览器会选择第一个匹配的 sidebar 线作为起点，第二个作为终点——如果它们是同一条线，结果就是 0 轨道宽，元素不可见。
更隐蔽的问题是「名字覆盖」：若你在 grid-template-columns 中写了 [a] 1fr [b] 1fr [a] 1fr，那么中间那条线同时拥有 b 和 a 两个名字，后续用 a 引用时，可能命中第一处或第三处，取决于上下文和浏览器解析顺序。
- 调试建议：用浏览器 DevTools 的 Grid 面板勾选「Show line numbers」和「Show named grid lines」，直观查看每条线实际绑定的名字
- 避免在单条轨道两侧用相同名字，例如
[x] 1fr [x]—— 这会让x同时代表起点和终点线，极易引发意外收缩 - 多人协作时，建议统一前缀，如
header-start、header-end，而非单独用start，减少全局命名污染
兼容性与 SSR/构建工具中的注意事项
所有现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+）都支持方括号命名语法，但部分旧版构建工具（如老版本 PostCSS autoprefixer）可能误判为非法 CSS 并删除整条声明，尤其当名字含连字符或数字时。
服务端渲染（SSR）框架如 Next.js 或 Nuxt 若启用了 CSS 提取或压缩，也可能因正则误匹配而破坏方括号结构，比如把 [main] 当作选择器片段处理。
- 验证方式：构建后检查最终生成的 CSS 文件中是否保留了原始
[xxx] - 规避策略：对关键命名线，可在声明中加注释锚点，如
/* grid-line: main-start */ [main-start]，辅助调试 - 不要依赖 JS 动态拼接线名（如
gridRow: ${prefix}-start），CSS 不支持运行时变量插值，只能靠 CSS 自定义属性间接实现
名字一旦在模板中定义，就成为网格容器的“坐标系基础设施”，改名等于重构坐标系——下游所有引用它的项目都要同步调整，这点比类名变更更敏感。
