命名网格线是将数字坐标转为语义锚点的关键，必须在grid-template-columns/rows中用空格包围的[name]语法定义，引用时须带方括号且大小写严格匹配，行列线隔离，混用grid-template-areas会静默失效。
命名网格线不是为了少写几个字符，而是把“第2列到第4列”这种坐标式描述，换成“从main-start到main-end”这种语义锚点。改布局时只动模板里的名字位置，所有引用自动对齐——这才是可维护性的核心。
grid-template-columns/rows 里怎么写 [name] 才不被浏览器丢弃
浏览器把[name]当独立 token 解析，前后必须有空格。任何紧贴尺寸的写法都会导致整条声明静默失效，容器退化为普通块级元素，且 DevTools 不报错。
-
1fr [main-start] 2fr [main-end] 1fr✅ 合法：方括号前后有空格 -
[sidebar-start] 1fr✅ 合法：开头命名，定义最左侧线 -
1fr[main-start]2fr❌ 静默失败：缺空格，整条被丢弃 -
1fr [main-start]2fr❌ 静默失败：[main-start]2fr被当做一个非法整体
grid-column 引用命名线时为什么总不生效
漏掉方括号是最常见错误。裸名如main-start不是变量、不是类名，浏览器会把它当关键字（比如auto）处理，结果等价于grid-column: auto / auto——元素只占一列，DevTools 计算值里也看不出异常。
-
grid-column: [main-start] / [main-end]✅ 正确 -
grid-column: main-start / main-end❌ 静默失败 -
grid-row: [main-start]❌ 无效：因为main-start是在grid-template-columns里定义的列线，不能用于行方向 -
grid-column: [Header-start]❌ 大小写敏感，必须和定义时完全一致（[header-start]）
命名线和 grid-template-areas 是两套机制，别混用
grid-template-areas定义的是区域（area），不是网格线。写"header header" "main aside"不会自动生成[header-start]这类线——它只是声明区域占位，边界线仍需显式命名。
立即学习“前端免费学习笔记（深入）”；
- 想让某区域左边界可复用，得在
grid-template-columns里单独写[header-start] 200px [header-end] - 同一位置多个名字合法：
1fr [sidebar-start sidebar-top] 2fr，后续任一都可引用 - 重复命名会自动编号：
repeat(3, [col] 1fr)生成三条名为col的线，引用第二条得写[col 2]
最容易被忽略的是：命名线本身不占空间、不影响渲染，删掉所有[name]只要尺寸值不变，页面视觉完全一样——但维护成本会指数级上升。语义锚点的价值，只在第一次改布局时才真正显现。
