命名网格线是布局维护的关键，必须用带空格的[name]格式定义且大小写严格匹配，引用时需方括号包裹，不可与grid-template-areas混淆，否则静默失效。
命名网格线不是锦上添花的写法，而是避免后期改布局时满屏找数字的关键操作。漏掉方括号、空格不规范、大小写错位，都会导致静默失效——页面看起来没变化，但语义已丢失。
grid-template-columns/rows 中怎么写 [name] 才不被浏览器忽略
浏览器把 [name] 当作独立 token 解析，前后必须有空格，否则整条声明会被丢弃，容器退化为普通块级元素，且不报错。
-
1fr [main-start] 2fr [main-end] 1fr✅ 合法：方括号前后都有空格 -
[sidebar-start] 200px✅ 合法：开头命名，定义最左侧列线 -
1fr[main-start]2fr❌ 静默失败：紧贴尺寸，整条grid-template-columns失效 -
1fr [main-start]2fr❌ 静默失败：[main-start]2fr被当做一个非法 token
grid-column / grid-row 引用命名线时为什么不起作用
最常见错误是漏掉方括号。裸名如 main-start 不是变量，浏览器会把它当关键字（比如 auto）处理，结果等价于 grid-column: auto / auto——项目只占一列，DevTools 里也看不出异常。
-
grid-column: [main-start] / [main-end]✅ 必须带方括号 -
grid-row: [header-start] / [footer-end]✅ 前提是名字在grid-template-rows中定义过 -
grid-column: main-start / main-end❌ 静默失败 -
grid-column: [Header-start]❌ 大小写敏感，定义时是[header-start]才有效 -
grid-column: [main-start] / [main-end]❌ 斜杠前后不能有空格
命名线和 grid-template-areas 是两套机制，别混用
grid-template-areas 定义的是区域（area），不是网格线。写 "header header" "main aside" 不会自动生成 [header-start] 这类线——它只是声明区域占位，边界线仍需显式命名。
- 二者可以联动：如果区域名和线名完全一致、大小写匹配、方向一致，Grid 会自动绑定边界
-
.container { grid-template-areas: "hd hd hd" "sd ct ft"; grid-template-columns: [sd] 200px [ct] 1fr [ft] 100px; grid-template-rows: [hd] 80px [ct] 1fr [ft] 60px; }→grid-area: hd的项目会自动跨[hd]到[ct]行线、[sd]到[ft]列线 - 若某区域引用了不存在的线名，浏览器静默忽略该区域定义，降级为默认流
真正容易被忽略的点是：命名线本身不占空间、不影响渲染，删掉它页面看起来一模一样——但它决定了你下次改布局时，是改一行模板代码，还是打开 DevTools 反复刷新、满屏找 2 / 4 和 3 / -1。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
