命名网格线需用方括号包裹、紧贴轨道尺寸，支持重复命名并自动编号，默认取首个；名称禁用空格、点号及css关键字；定位时须行列线匹配，仅显式模板中生效，与grid-template-areas混用可提升布局灵活性。
命名网格线的语法格式
在 grid-template-rows 或 grid-template-columns 中，必须把自定义名称写在方括号内，且紧贴轨道尺寸前或后（不能有空格隔开）。比如：grid-template-columns: [start] 1fr [content] 2fr [end] —— 这里 [start]、[content]、[end] 都是命名网格线，它们不占空间，只是标记位置。
命名线能重复使用，但含义取决于上下文
同一名称可在多处出现，CSS Grid 会自动为它们编号（如 header-start 第一次出现是 header-start-1，第二次是 header-start-2），但直接用 header-start 指代时，默认取第一个。常见误用是以为重复命名会“覆盖”，其实不会——它只是生成多个同名线，后续用 grid-column: header-start / header-end 时，浏览器会选择最靠左/上的那对匹配线。
- 推荐显式加数字后缀避免歧义，比如
[sidebar-start-1]和[sidebar-start-2] - 名称中不能含空格、点号或特殊符号，连字符
-和下划线_是安全的 - 不能用 CSS 关键字如
auto、span、line作名称
用命名线定位项目时，注意起始/结束线的方向性
grid-column-start 必须对应一条列线（来自 grid-template-columns），grid-row-end 必须对应一条行线（来自 grid-template-rows）。如果错把列线名用在 grid-row-start 上，浏览器会静默忽略，项目退回默认位置。
- 检查开发者工具的“Layout”面板，看蓝色虚线是否标出了你定义的名称线
- 用
grid-area时，四个值顺序是row-start / column-start / row-end / column-end，别把行列线名填反 - 命名线只在显式定义的轨道模板中生效；用
grid-auto-columns生成的隐式网格线无法命名
命名线与语义化布局的实际配合方式
真正发挥命名线价值的地方，是让 grid-template-areas 和线定位混用。例如先用命名线划分主体区域：grid-template-columns: [page-start] 1fr [main-start] 3fr [main-end] 1fr [page-end]，再让某个卡片组件写成 grid-column: main-start / main-end —— 这样改布局时只需动模板，所有依赖该名称的项目自动对齐。
容易被忽略的一点：命名线本身不触发重排，但若修改了某条线的位置（比如把 [main-start] 从第2列挪到第3列），所有依赖它的项目会立即响应，**这种响应是同步的、无过渡的**，如有动画需求，得额外用 transition 控制其他属性（如 transform），不能指望网格线移动本身产生动画。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
