css grid中网格线命名需用方括号包裹语义化名称（如[sidebar-start]），紧贴轨道尺寸两侧，支持重复名与多命名共存，引用时用grid-column: start/end，调试依赖devtools“show line names”。
方括号里写名字，不是随便起的
CSS Grid 允许在定义列或行轨道时，用方括号给网格线命名，比如 grid-template-columns: [start] 1fr [main] 2fr [end]。这里的 [start]、[main]、[end] 是网格线名称，不是类名或变量，不能带空格、点号或连字符开头（但可以包含连字符，如 [sidebar-start]）。命名必须紧贴轨道尺寸两侧，不能独立成项，也不能放在 repeat() 外部。
- 名称区分大小写，
[Header]和[header]是两条不同线 - 同一名字可重复出现，Grid 会自动编号，比如
[item] 1fr [item] 1fr [item]生成三条名为item的线，对应item 1、item 2、item 3 - 定义多条线时，相邻轨道共享一条线，所以
[a] 1fr [b] 1fr [c]实际产生四条线：a、b、b、c（中间那条是b线被复用）
定位元素时直接用名字，但得配对使用
用 grid-column-start、grid-row-end 等属性时，值可以直接写命名线，例如 grid-column: start / end。注意两点：
- 必须成对指定起止线（或用
/简写），单写一个名字如grid-column-start: main只设起点，终点仍按默认规则（通常是起点后一条线） - 起点和终点名必须存在于同一维度（都是列线或都是行线），混用会无效，比如列方向用行线名不会报错，但不生效
- 如果名字重复（如多个
[aside]），浏览器取第一个匹配的位置，想选后面的得用索引语法：aside 2表示第二条aside线
div.card {
grid-column: sidebar-start / sidebar-end;
grid-row: content-start / content-end;
}
命名线和数字线共存时，优先级一样，但容易误判位置
Grid 中命名线和数字线（如第 2 条线）本质是同一套坐标系统。比如 grid-template-columns: [a] 1fr [b] 1fr [c]，那么：
- 第 1 条线是
a - 第 2 条线是
b - 第 3 条线是
c
所以 grid-column: 1 / 3 和 grid-column: a / c 效果完全一致。问题常出在：
- 动态插入新轨道却忘了更新命名，导致原名字指向错位的线
- 使用
grid-area时漏掉某条线名，比如只写grid-area: header / sidebar / footer（缺一个值），浏览器会静默忽略整条声明 - 在
grid-template-areas中定义区域时，隐式创建的线没有名字，不能在grid-column中引用它们
调试命名线最有效的办法是 DevTools 里开网格叠加层
Chrome 和 Firefox 的开发者工具都能可视化显示命名线：勾选“Show line names”选项后，网格线旁会标出所有名字。这比反复改 CSS 猜位置快得多。
- 不要依赖 console 输出查线名——CSS 层面没有 API 暴露命名线列表
- 如果名字没显示出来，先检查是否拼写错误，再确认是否写在
grid-template-columns或grid-template-rows里（grid-template-areas不产生可引用的线名） - 复杂布局中，建议每组相关轨道都用语义化前缀统一命名，比如
[header-start]、[header-end]、[main-start]，避免全局重名冲突
命名线本身不增加性能开销，但名字太多或嵌套太深会让定位逻辑变模糊——人容易看晕，机器可不管。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
