具名网格线是通过grid-template-columns/rows用方括号定义的语义化网格线，如[start] 1fr [end]；区别于数字索引线（如1 / 4），它提升可读性与维护性，避免计算错误，且支持跨断点复用命名。
什么是具名网格线，它和数字索引线有什么区别？
具名网格线是 CSS Grid 中通过 grid-template-rows 或 grid-template-columns 显式定义的、带名字的轨道分界线。比如 grid-template-columns: [start] 1fr [col2] 1fr [col3] 1fr [end]，其中 [start]、[col2] 都是具名线。它和默认的数字索引（如 grid-column: 1 / 4）本质相同，但更语义化、可维护性更强——尤其当你需要跨多列布局或复用列结构时，名字比数字更不容易出错。
实际写 12 列系统时，数字索引容易漏算、难对齐；而具名线能直接表达“从第 3 栏开始，到第 8 栏结束”，逻辑清晰。
怎么用具名线构建 12 列等宽网格容器？
关键不是“画 12 条线”，而是定义 **13 条垂直线**（0 到 12），中间 12 段为列。每列宽度设为 1fr，再用方括号给关键位置命名：
.container {
display: grid;
grid-template-columns:
[full-start]
[col1-start] 1fr [col1-end col2-start]
[col2-end col3-start]
[col3-end col4-start]
[col4-end col5-start]
[col5-end col6-start]
[col6-end col7-start]
[col7-end col8-start]
[col8-end col9-start]
[col9-end col10-start]
[col10-end col11-start]
[col11-end col12-start]
[col12-end full-end];
gap: 1rem;
}
说明：
-
[col1-start]和[col12-end]是最外侧边界，方便全宽布局 - 每个列区间都用两个名字：例如第 3 列是
[col3-start]到[col3-end]，同时[col3-end]也是[col4-start]，避免重复定义 - 不推荐把所有线都单独命名（如
[col1-start] [col1-end] [col2-start] [col2-end]...），那样冗长且难维护
如何让子元素按“起始列/跨越列数”方式定位？
Grid 定位靠 grid-column 或 grid-row，值是“起始线 到 终止线”。Bootstrap 的 col-6 相当于占 6 列，即从某起点出发，跨越 6 列宽度。
示例：一个占 8 列、从第 3 列开始的区块：
.item-a {
grid-column: col3-start / span 8;
}
也可以显式写终点：
立即学习“前端免费学习笔记（深入）”；
.item-b {
grid-column: col5-start / col9-end;
}
注意点：
-
span N是相对起始线向右跨 N 个轨道，不是跨 N 条线 - 不能混用数字索引和具名线（如
grid-column: 2 / col5-end是无效的） - 如果容器有
gap，span计算的是轨道数，不包含 gap 宽度——这点和 Bootstrap 的 margin-based 栅格不同
响应式下怎么切换列数命名？
CSS Grid 不支持“条件性重命名线”，所以无法像 Bootstrap 那样用 col-md-6 动态改列数。常见做法是：
- 在不同断点下，重新定义
grid-template-columns，并保持关键名字一致（如始终保留 [full-start]、[full-end]）
- 用媒体查询覆盖整个列定义，例如移动端改为 4 列系统：
@media (max-width: 768px) {
.container {
grid-template-columns:
[full-start]
[col1-start] 1fr [col1-end col2-start]
[col2-end col3-start]
[col3-end col4-start]
[col4-end full-end];
}
}
grid-template-columns，并保持关键名字一致（如始终保留 [full-start]、[full-end]）这时 grid-column: col2-start / span 2 在 PC 端占 2/12，在手机端占 2/4 —— 行为自然适配，但前提是你的业务逻辑接受这种比例缩放。如果需要严格保持“PC 占 4 列、手机占 12 列”，就得用 JS 注入 class 或放弃纯 CSS 方案。
真正难的不是写出 12 条线，而是让团队成员理解命名意图，并在组件中统一使用 colX-start 这类约定。一旦命名随意（比如有人写 left-col3、有人写 c3-s），后续维护成本会指数上升。
