命名网格线在grid-template-columns/rows中用方括号定义，如[sidebar-start] 200px [sidebar-end main-start]，名字全小写、无空格或中划线，可复用；子元素用grid-column: sidebar-start / sidebar-end引用，不加引号或方括号。
grid-template-columns/rows 中如何定义命名网格线
命名网格线不是额外属性，而是写在 grid-template-columns 或 grid-template-rows 值里的方括号内容。它必须紧贴轨道尺寸前后，不能孤立存在。
常见错误是漏掉方括号、或把名字写在引号里（如 "[sidebar]"），这会让浏览器直接忽略该命名。
-
grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end];—— 一条轨道可带多个命名，sidebar-end和main-start是同一条线的两个名字 - 重复命名允许：比如
[col] 1fr [col] 1fr [col]，后续可用任意一个col定位 - 名字不能是 CSS 关键字：
auto、span、none、grid都会失效
子元素用 grid-column/grid-row 引用命名线时的写法
引用命名线和引用数字线语法一致，都是 start / end 形式，但名字不加引号、不加方括号——那只是定义时才需要的语法糖。
容易踩的坑是混淆定义与使用：定义时写 [sidebar]，使用时写 sidebar；写成 [sidebar] 或 "sidebar" 都不会生效。
-
.nav { grid-column: sidebar-start / sidebar-end; }—— 正确，跨整个侧边栏列轨道 -
.content { grid-column: main-start / main-end; }—— 正确，填满主内容列 -
.header { grid-row: header-start / header-end; }—— 同理适用于行方向
命名线与数字线混用是否安全
语法上允许，比如 grid-column: 1 / sidebar-end;，但实际项目中不建议。
一旦容器结构变更（比如在开头插入一列），所有依赖数字线的定位都会偏移，而命名线只要语义不变就依然可靠。混用会削弱命名线带来的可维护性优势。
- 如果父容器列数可能变动，坚持全用命名线
- 动态生成的网格（如 JS 控制列数）慎用命名线，因为 CSS 无法运行时重命名
- 调试时可用
grid-column: sidebar-start / -1;让元素从命名线一直延伸到末尾，比硬写数字更鲁棒
嵌套 Grid 中命名线是否继承
不继承。每个 display: grid 容器都有一套独立的命名线系统，子元素的 grid-column 始终相对于其**直接父容器**的命名线计算。
这意味着你在顶层容器定义的 [main-start]，对它的子元素完全不可见——除非那个子元素本身也是 grid 容器，并在自己的 grid-template-columns 里重新声明同名线。
- 想让深层元素“感知”顶层命名线？要么把它提升为顶层网格项，要么在每一层手动透传命名
- 用
subgrid可以复用父网格线，但目前兼容性有限（Chrome 119+、Firefox 117+ 支持，Safari 尚未支持） - 嵌套时最稳妥的做法：只在当前容器定义所需命名线，避免跨层级假设
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
