grid-column-start 和 grid-column-end 用于定义网格项的起始和结束列线，控制其横向跨度。通过数字或命名线指定位置，如 grid-column: 1 / 3 表示从第1条线到第3条线，跨越两列；也可用 span 关键字简化写法，如 1 / span 2。支持简写属性 grid-column，并可通过命名网格线提升代码可读性，适用于复杂布局。列线编号从1开始。
CSS 中的 grid-column-start 和 grid-column-end 属性用于精确控制网格项在网格容器中占据的列范围。通过设置这两个属性，你可以决定一个元素从哪一列开始、在哪一列结束，从而实现跨列布局。
基本语法与作用
这两个属性属于 CSS Grid 布局的一部分，应用于网格子元素（grid item）：
- grid-column-start：指定项目从哪一列线开始
- grid-column-end：指定项目在哪一列线结束（不包含该线）
列线可以是数字（如 line 1, line 2），也可以是命名的网格线。
使用数字控制列跨度
假设你有一个 3 列的网格容器：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.item {
grid-column-start: 1;
grid-column-end: 3;
}
上面代码中，.item 从第 1 条竖线开始，到第 3 条竖线结束，因此它会横跨前两列。
- 从 line 1 到 line 3 → 占据 2 列宽度
- 如果设置为 start: 2, end: 4 → 同样占 2 列（中间和最后一列）
简写形式：grid-column
更常见的写法是使用简写属性 grid-column：
.item {
grid-column: 1 / 3; /* 等同于 start:1, end:3 */
}
斜杠前后分别是 start 和 end 的值。你也可以用 span 关键字来简化跨列：
.item {
grid-column: 1 / span 2; /* 从第1条线开始，跨越2列 */
}
这等价于
grid-column: 1 / 3，但更灵活，尤其在不确定结束线号时很有用。
使用命名网格线（可选但实用）
你还可以在定义网格时命名线条，提高可读性：
.container {
display: grid;
grid-template-columns: [start] 1fr [middle] 1fr [end] 1fr;
}
.item {
grid-column-start: start;
grid-column-end: end;
}
这样 .item 就会从名为 "start" 的线开始，到 "end" 结束，完整占据三列。
基本上就这些。合理使用
grid-column-start和
grid-column-end能让你精准控制元素在网格中的位置和跨度，适合复杂布局场景。不复杂但容易忽略的是列线编号是从 1 开始的，不是 0。
