命名网格线必须紧贴轨道尺寸且前后有空格，否则整条声明静默失效；引用时需方括号、大小写严格匹配，不可混用grid-template-areas，重复命名自动编号但单名默认取首个。
命名网格线必须紧贴轨道尺寸写，否则整条声明静默失效
浏览器解析 grid-template-columns 时，把 [name] 当作独立 token，前后缺空格就直接丢弃整条声明——容器退化为普通块级元素，DevTools 里也看不出报错。这不是警告，是彻底失效。
-
1fr [main-start] 2fr [main-end] 1fr✅ 合法：方括号前后有空格，且紧贴尺寸 -
[main-start] 1fr✅ 合法：开头命名，定义最左侧列线 -
1fr[main-start]2fr❌ 静默失败：没空格，[main-start]2fr被当非法标识符 -
repeat(3, [col] 1fr)❌ 外层不能套命名；得写成repeat(3, [col-start] 1fr [col-end])
引用命名线必须带方括号，且大小写严格匹配
裸名如 main-start 不是变量，浏览器会把它当关键字（比如 auto）处理，结果等价于 grid-column: auto / auto——元素只占一列，看起来“没效果”，但 DevTools 计算值里显示的仍是 auto，毫无提示。
- ✅ 正确：
grid-column: [main-start] / [main-end]或简写为grid-column: main-start / main-end（注意：简写形式仍要求名字本身完全匹配） - ❌ 无效：
grid-row: [main-start]——main-start是列线，不能用于行方向 - ❌ 无效：
grid-column: Header-start / Header-end—— 定义时是[header-start]，大小写不一致即失效 - ✅ 同一位置多个名字：
[sidebar-start sidebar-top]，后续任一都可引用
命名线与 grid-template-areas 混用会静默失效
二者底层定位机制冲突。父容器用了 grid-template-areas: "header main"，子项再写 grid-column: sidebar-start / sidebar-end，这条规则大概率被忽略——浏览器不报错，但布局不动。
- 想微调某个区域内的子项？先确认它没被
grid-area锁死 - 更安全做法：主结构用
grid-template-areas，局部精调改用命名线 +grid-column，且子项不设grid-area - 调试时打开 DevTools 网格叠加层，勾选 “Show line names”，能直观看到命名线是否真实生成、拼写是否一致
重复命名自动编号，但单写名字默认取第一个
命名线本质是坐标锚点，不是逻辑分组。写 [item] 1fr [item] 1fr [item] 会生成三条名为 item 的线，对应 item 1、item 2、item 3。但直接写 grid-column: item / item 只会跨第一条到第二条线——因为单名默认取首个匹配位置。
- 要跨第二到第三条？必须显式写
grid-column: item 2 / item 3 - 数字线和命名线本质同一套坐标系统：
grid-column: 1 / 3和grid-column: a / c效果一致（前提是[a] 1fr [b] 1fr [c]） - 动态 JS 插入新列轨道后，旧命名线编号会偏移——名字没变，但指向的物理位置已变，这是最容易被忽略的维护陷阱
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
