合法命名线必须用方括号包裹、紧贴轨道尺寸，禁用引号、数字开头和连字符；裸名会被当关键字忽略，引用时漏括号则静默失效；命名线与grid-template-areas语义隔离，需显式定义。
grid-template-columns/rows 中怎么写线名才合法
命名必须用方括号包裹，紧贴轨道尺寸，不能加引号、不能以数字开头、不能含连字符。浏览器遇到非法写法会静默忽略整条声明，布局照常渲染但名字失效。
-
grid-template-columns: [sidebar-start] 240px [sidebar-end content-start] 1fr [content-end]✅ 同一位置多个名用空格分隔 -
grid-template-columns: sidebar-start 240px content-start 1fr❌ 裸名被当长度值解析，报Invalid property value -
grid-template-columns: ["sidebar-start"] 240px❌ 引号非法，整个括号部分被跳过 -
grid-template-columns: [1st-col] 1fr❌ 数字开头不合法，该线名不会注册
引用命名线时为什么必须带方括号
浏览器把裸名（如 sidebar-start）当作关键字处理——比如 auto、span 或 end，根本不会去查你定义的线名表。漏掉方括号，样式就静默失效，调试时元素没对齐，往往不是逻辑错，而是语法被跳过了。
-
grid-column: [sidebar-start] / [content-end]✅ 正确引用 -
grid-column: sidebar-start / content-end❌ 浏览器尝试匹配关键字，失败后回退为auto -
grid-column: [sidebar-start] / -1✅ 允许混用：命名线 + 行号 -
grid-column: [Header]❌ 大小写敏感，[header]才是有效名
命名线和 grid-template-areas 是两套东西，别混用
grid-template-areas 定义的是区域（area），不是线（line）。它不会自动生成同名网格线，两者语义隔离。想靠 grid-area: header 让元素自动跨到某行线？不行。必须在 grid-template-rows 里显式写 [header-start] 60px [header-end]，再让区域边界对齐这些线。
-
grid-template-areas: "header header" "main aside"→ 只创建header、main、aside这些区域名 -
.header { grid-area: header; }✅ 绑定区域 -
.main { grid-column: header / main; }❌header和main不是线名，无效 - 真要复用语义，得同步写：
grid-template-rows: [header-start] 60px [header-end main-start] 1fr [main-end]
调试时怎么确认命名线生效了
别靠猜。打开 Chrome 或 Firefox 的开发者工具，选中 grid 容器，在 Styles 面板展开 grid-template-columns 或 grid-template-rows，看解析后的值里有没有你写的方括号名字。如果没出现，说明定义有误——大概率是括号不匹配、空格缺失或用了禁用字符。
- 临时加一条测试规则：
* { outline: 1px solid red; }，再配合 Layout 面板勾选Show line names，实时看线名是否标出 - 名字本身不占空间、不影响布局，删掉所有方括号，只要尺寸值不变，视觉完全一样——但它决定了你改布局时是改一行轨道定义，还是满屏搜
grid-column: 2 / 4 - 优先为语义明确的边界命名，比如
[main-start]、[footer-end]；避免[line-3]这类无意义名，也别在每个断点里重复定义整套线名
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
