grid-template-columns 中用方括号命名轨道线，如 [sidebar-start] 240px [sidebar-end content-start] 1fr [content-end]，命名线用于 grid-column 引用，提升响应式与组件复用的稳定性，兼容现代浏览器且无性能损耗。
grid-template-columns 里怎么给列起名字
命名不是写在 grid-template-columns 值里面，而是用括号语法把名字包在轨道尺寸前后——比如 grid-template-columns: [sidebar-start] 240px [sidebar-end content-start] 1fr [content-end]。名字必须用方括号包裹，且同一位置可以放多个名字（空格分隔），但不能有引号、连字符或数字开头。
常见错误是直接写成 grid-template-columns: sidebar 240px content 1fr，这会被当成长度值解析，浏览器报 Invalid property value。
- 名字只在当前声明中生效，不会自动继承到行方向（
grid-template-rows） - 重复名字（如两个
[header]）是合法的，Grid 会把它们视为同一逻辑线，适合跨区域对齐 - 名字本身不占空间，只是标记位置；删掉名字，布局行为完全不变
用 grid-column 引用命名线时的写法细节
引用命名线靠 grid-column-start / grid-column-end 或简写 grid-column，格式是 start-line / end-line，比如 grid-column: sidebar-start / content-end。注意斜杠前后不能有空格，否则失效。
容易踩的坑：漏写斜杠，写成 grid-column: sidebar-start content-end，结果变成 grid-column-start: sidebar-start + grid-column-end: auto，元素只占一列。
- 如果只写一个名字，如
grid-column: content-start，等价于grid-column-start: content-start，终点仍为auto - 可以混用名字和数字，比如
grid-column: 2 / content-end，但可读性会下降 - 名字区分大小写，
[Header]和[header]是两条不同线
命名线在响应式和组件复用中的实际价值
名字的价值不在单次布局，而在多处复用同一套语义线。比如在媒体查询里改列宽，只要保持 [main-start]、[aside-end] 这些名字不变，所有 grid-column 引用都不用动。
组件化场景下，子组件通过命名线对接父容器，比硬写 grid-column: 2 / -1 更稳定——后者一旦父容器列数变化就错位。
- 名字不宜过细（如
[col3-start]），应反映内容角色（[nav-start]、[article-start]） - 避免全局重名冲突，可在组件级加前缀，如
[card-header-start] - 调试时用浏览器开发者工具「Layout」面板勾选「Show line names」，能直观看到命名线位置
兼容性和性能影响几乎为零
命名线是 CSS Grid Level 1 就支持的特性，Chrome 57+、Firefox 52+、Safari 10.1+ 全部原生支持，无需前缀。它不触发重排，也不增加计算开销——名字只在解析样式时做一次映射，运行时和数字线无区别。
唯一要注意的是，如果用 JS 动态读取 gridTemplateColumns，返回值里**不包含名字部分**，只返回纯轨道尺寸（如 "240px 1fr"）。需要名字信息得自己维护或从 CSSOM 其他途径提取。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
