关键在于grid-column操作的是真实存在的网格线，线未显式定义则跨列静默失效；必须先用grid-template-columns声明列结构（如repeat(6,1fr)生成7条线），再配合绝对定位（2/4）或相对跨度（2/span 2）语法，推荐用grid-area一次写全行列起止。
用 grid-column 让元素跨列，关键不是“写几个数字”，而是理解它操作的是**真实存在的网格线**——线没生成，跨列就无效。
必须先定义列结构
父容器不设 grid-template-columns，浏览器只按内容隐式生成几条线，你写的 grid-column: 1 / 4 很可能指向一条根本不存在的线，结果静默失效。
- 显式定义：比如
grid-template-columns: 1fr 1fr 1fr;→ 生成 4 条垂直线（编号 1–4） - 用
repeat()更灵活：grid-template-columns: repeat(6, 1fr);→ 7 条线（1–7） - 打开浏览器开发者工具，开启 Grid overlay，直接看线是否画出来了
两种写法，逻辑完全不同
grid-column 支持两种语法，但定位机制相反，混用容易出错：
-
绝对定位写法：
grid-column: 2 / 4;—— 强制卡在第 2 条线和第 4 条线之间，不管前面有没有空位，也不管其他项怎么排 -
相对跨度写法：
grid-column: 2 / span 2;—— 从第 2 条线开始，向右占 2 列（终点自动算为第 4 条线） -
grid-column: span 2;—— 不指定起点，由 Grid 自动分配第一个可用位置，再向右跨 2 列
避免常见失效情况
写了却没效果？优先排查这三点：
立即学习“前端免费学习笔记（深入）”；
- 父容器缺失
display: grid;或grid-template-columns - 目标线号超出实际生成范围（例如 6 列只生成了 1–7 号线，却写
grid-column: 1 / 9） - 用大数字硬写不安全，改用负值更可靠：
grid-column: 2 / -1;表示“从第 2 条线到容器最右边那条线”
推荐搭配使用 grid-area
要同时控制行列跨度，分开写 grid-column 和 grid-row 容易漏掉某一项，导致元素回退到默认位置。直接用 grid-area 一次写全更清晰、更少出错：
-
grid-area: 1 / 2 / 3 / 5;→ 行起/列起/行止/列止（四值顺序固定） - 也可命名区域：
grid-area: header;，前提是父容器已用grid-template-areas定义过该名称
