必须在grid-template-columns/rows中用空格包围的[name]语法定义，如1fr [main-start] 2fr；引用时须带方括号且大小写严格匹配，如grid-column: [main-start] / [main-end]。
grid-template-columns/rows 里怎么写 [name] 才生效
浏览器把 [name] 当作独立 token 解析，前后必须有空格。写成 1fr[name] 或 [name]1fr 都会被整条丢弃，容器退化为普通块级元素，且不报错。
合法写法只有这几种：
-
1fr [main-start] 2fr [main-end] 1fr—— 名字夹在轨道之间 -
[start] 1fr—— 开头命名，定义最左侧线 -
1fr [sidebar-start sidebar-top] 1fr—— 同一位置多个名字，空格分隔 -
repeat(3, [col] 1fr)—— 批量生成col 1、col 2、col 3
名字不能含空格、点号、数字开头，连字符 - 和下划线 _ 安全；也不能用 auto、span 这类 CSS 关键字。
grid-column 引用时为什么 [main-start] / [main-end] 不起作用
漏掉方括号是最常见错误。裸名如 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: [Header-start]❌ 大小写敏感，定义时是[header-start]才有效 -
grid-column: main-start / main-end❌ 静默失败
斜杠前后不能有空格，grid-column: [main-start] / [main-end] 合法，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] 列线 —— 前提是名字拼写、大小写、方向全部一致。
如果某区域引用了不存在的线名，浏览器静默忽略该区域定义，降级为默认流。
调试和维护时最容易被忽略的点
命名线本身不占空间、不影响渲染，删掉所有 [name] 只要尺寸值不变，页面看起来一模一样 —— 但它决定了你改布局时是改一行模板，还是满屏找数字、反复刷新调试。
真正容易踩坑的是：
- 在媒体查询里重复定义整套命名线，导致 CSS 膨胀；更轻量的做法是覆盖
grid-template-areas或用@container - 为每条线都起名，比如
[line-3]、[col-5]，结果维护成本飙升；优先为语义明确的边界命名，如[nav-start]、[article-end] - 调试时只看网格叠加层，却没开 DevTools 的「Layout」面板勾选「Show line names」，导致命名是否生效无从验证
名字越多，越要警惕歧义：同一名称多次出现时，grid-column: sidebar / sidebar 可能取到同一条线，结果宽度为 0 —— 元素不可见，还不报错。
