必须在grid-template-columns/rows中用空格包围[name]语法声明，如1fr [main-start] 2fr [main-end]；引用时须带方括号且大小写严格匹配，裸名会被当作关键字静默处理为auto。
grid-template-columns/rows 里怎么写[name]才不被浏览器忽略
浏览器只把 [name] 当作独立 token 解析，前后必须有空格。任何紧贴尺寸的写法都会导致整条声明失效，容器退化为普通块级元素，且不报错。
-
1fr [main-start] 2fr [main-end]✅ 合法：方括号前后有空格，紧贴轨道尺寸 -
[main-start] 1fr✅ 合法：开头命名，定义最左侧线 -
1fr[main-start]2fr❌ 静默失败：缺空格，整条声明被丢弃 -
1fr [main-start]2fr❌ 静默失败：[main-start]2fr被当做一个整体，非法 -
repeat(3, [col] 1fr)✅ 合法；但[col] repeat(3, 1fr)会失效
grid-column / grid-row 中引用命名线为什么总不生效
漏掉方括号是最常见错误。裸名如 main-start 不是变量、不是类名，浏览器会把它当关键字（比如 auto）处理，结果等价于 grid-column: auto / auto——元素只占一列，DevTools 计算值里也看不出异常。
-
grid-column: [main-start] / [main-end]✅ 正确，斜杠前后都不能有空格 -
grid-column: main-start / main-end❌ 静默回退为auto / auto -
grid-row: [main-start]❌ 无效：因为main-start是在grid-template-columns里定义的列线，不能用于行方向 -
grid-column: [Header-start]❌ 大小写敏感，必须和定义时完全一致（[header-start]） - 只写一个名字，如
grid-column: [content-start]，等价于grid-column-start: content-start，终点仍为auto
命名网格线和 grid-template-areas 混用会出什么问题
二者语义隔离、定位机制冲突，混用不会报错，但后声明的规则大概率被忽略，尤其是子元素同时写了 grid-area 和 grid-column 时。
-
grid-template-areas: "header main"→ 只创建header、main这些区域名，**不会自动生成同名线** - 父容器用了
grid-template-areas，子元素再写grid-column: sidebar-start / sidebar-end→ 直接被忽略 - 想微调某个区域内的子项位置？先确认它没被
grid-area锁死；更安全的做法是：主结构用grid-template-areas，局部精调改用命名线 +grid-column，且子项不设grid-area - 同一名称可在多处出现，比如
[sidebar]出现在第2列末和第3列初，它们是同一条线；但若在grid-template-areas和grid-template-columns中都写了[sidebar]，浏览器不会自动绑定，必须名字完全一致且位置匹配才联动
调试时怎么看命名线有没有生效
名字本身不占空间、不影响渲染，删掉所有 [name] 只要尺寸值不变，页面看起来一模一样——但它决定了你后续能不能靠语义快速定位。调试的关键是验证是否真实生成。
立即学习“前端免费学习笔记（深入）”；
- Chrome / Edge 开发者工具 → 元素面板 → Layout 标签 → 勾选
Show line names，实时查看命名是否生效 - Firefox 的 Grid Highlighter 能直观看到编号线（如
col 2），Chrome 目前不显示序号 - 检查 computed styles 中
grid-template-columns或grid-template-rows的解析值，如果某条线没显示名字，说明定义语法有误（比如括号不匹配、空格缺失） - 名字未定义时，该
grid-column声明会被整个忽略（不报错，但布局失效）
[header-start]、[main-end]，而不是 [line-3]；名字不宜过细，应反映内容角色，且避免全局重名冲突——组件级加前缀更稳妥。 
