grid-column-start 和 grid-column-end 是 css grid 中精确定位网格项目起始与结束列线的属性，基于线号（而非跨度）定位更可靠，可避免隐式轨道变化导致的布局漂移，推荐使用 grid-column 复合属性简化书写。
grid-column-start 和 grid-column-end 是什么
这两个属性是 CSS Grid 中用于**精确定位网格项目起始列线和结束列线**的定位属性，不是控制“跨度”的直接方式。它们指定的是项目在列轴上占据的**起始位置（line）和终止位置（line）**，而跨度（span）是这两者之间的差值，由你填的数值隐式决定。
比如 grid-column-start: 2 + grid-column-end: 5 表示从第 2 条列线开始、到第 5 条列线结束，实际跨过 3 列（即 span 3），但这个 3 是算出来的，不是写死的。
为什么用 line 数而不是 span 更可靠
基于线（line）的定位能明确避开隐式轨道数量变化带来的歧义。当网格容器没有显式定义 grid-template-columns，浏览器会按内容自动生成列轨道，此时用 span 容易因隐式列数不确定导致布局漂移。
-
grid-column: 1 / -1—— 从第 1 条线拉到最右侧（含所有列），比span 100更健壮 -
grid-column-start: 3+grid-column-end: span 2—— 合法，但span 2是相对于起始线计算的，等价于end: 5 - 若容器列定义为
grid-template-columns: repeat(4, 1fr)，则最大有效正向线号是5（线号从 1 开始，4 列 → 5 条线）
常见错误：负数线号与边界越界
负数线号从容器末尾反向计数：-1 指最后一根列线（最右侧边缘），-2 是倒数第二条线。但越界不会报错，而是被截断或回退到最近合法线——这常导致“明明写了 end: -3 却没生效”。
立即学习“前端免费学习笔记（深入）”；
典型误用场景：
- 容器只有 3 列（即线号 1–4），却写
grid-column-end: -5→ 实际被解析为1（最小允许线号） - 用
grid-column: 2 / 2—— 起止线相同，项目不显示（宽度为 0） - 在 flex 布局容器里误加 grid-column 属性 → 完全无效（Grid 属性只对 grid 容器的直系子项生效）
更简洁的写法：用 grid-column 复合属性
grid-column 是 grid-column-start 和 grid-column-end 的简写，推荐日常使用，语义清晰且不易漏配对。
/* 这三组写法等价 */
.item {
grid-column-start: 2;
grid-column-end: 4;
}
<p>.item {
grid-column: 2 / 4;
}</p><p>.item {
grid-column: 2 / span 2;
}注意：grid-column: 2 是 2 / 3 的简写（即默认占 1 格），不是 2 / auto；如果想让项目一直延伸到末尾，必须显式写 2 / -1 或 2 / span 999（后者靠容错，不推荐）。
线号依赖于网格容器的列定义和隐式轨道生成规则，调试时打开浏览器开发者工具的 Grid 面板，勾选“Show line numbers”，能直观看到每条线的编号——这是最容易被跳过的验证步骤。
