命名网格线必须在grid-template-columns/rows中紧贴轨道尺寸两侧用[name]声明，不可独立或置于repeat()外；引用时须成对且同方向，大小写敏感，非法字符或拼错将静默失效。
grid-template-columns/rows 中用 [name] 命名网格线
命名必须写在 grid-template-columns 或 grid-template-rows 的轨道尺寸**紧邻两侧**，不能独立成项，也不能塞进 repeat() 外部。比如：grid-template-columns: [sidebar-start] 200px [main-start] 1fr [main-end] 200px [sidebar-end];
常见错误是把命名写成 grid-column: [header-start] 1 / [header-end] 2 —— 这种写法只对单个元素生效，其他子项无法复用，等于白写。
- 名字区分大小写：
[Header]和[header]是两条不同线 - 不能以数字或连字符开头：
[1-col]、[-start]非法；[col-1]合法 - 空格和点号禁止：
[my col]、[item.name]会直接被忽略 - 同一根线可有多个名字：
[header-top main-bottom]合法，后续任一名称都可引用
用 grid-column 和 grid-row 引用命名线定位
命名线不是类名，也不是区域名，引用时直接写名字，但必须成对（起/止），且不能跨维度混用。例如：grid-column: sidebar-start / sidebar-end; 有效；grid-column: header-top / footer-bottom; 无效（那是行线名，用在列方向不生效）。
- 单写一个名字如
grid-row: main-top;只设起点，终点默认为下一条线（即跨 1 行） - 重复命名时，浏览器取第一个匹配的线作为起点；想选第二条
[aside]，得写aside 2 - 混用数字和名字合法：
grid-column: 1 / main-end;解析为第 1 条线到名为main-end的线 - 名字未定义时，整条声明被静默忽略（无报错，但布局失效）
命名线和数字线共存时的坐标一致性
命名线和数字线本质是同一套线编号系统。比如：grid-template-columns: [a] 1fr [b] 1fr [c]; 对应：第 1 条线 = a，第 2 条线 = b，第 3 条线 = c。所以 grid-column: 1 / 3; 和 grid-column: a / c; 效果完全一样。
这点容易被误判——你以为 a 是“语义名”，位置就该浮动，其实它就是第 1 条线，不会随内容变化偏移。调试时打开浏览器 DevTools 的 “Show line names” 功能，能直观看到所有命名线实际落在哪条数字线上。
常见失效原因：容器没设 display: grid 或线名拼错
最常踩的坑是：写了 grid-column: content-start / content-end;，但父容器没声明 display: grid，或者 content-start 在 grid-template-columns 里拼成了 contnet-start。这两种情况都不会报错，但样式完全不生效。
- 检查父容器是否真有
display: grid或display: inline-grid - 确认命名线出现在
grid-template-columns或grid-template-rows中，而非其他属性 - 复制粘贴线名时注意大小写和连字符，
[Sidebar-Start]≠[sidebar-start] - 避免在构建工具（如 PostCSS）中启用自动 CSS 压缩，某些插件会误删方括号内的命名
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
