CSS Grid中元素跨行跨列需用grid-row和grid-column指定起始与结束网格线；3×3网格有4条行列线，如grid-column:1/3跨前两列，grid-row:2/4跨第2、3行；支持负值（如-1指末线）、span语法及grid-area命名区域。
在 CSS Grid 布局中，让某个元素跨行跨列，核心就是用 grid-row 和 grid-column 指定它占据的**起始线和结束线**（不是行数或列数本身）。只要写对线号，就能精准控制跨越范围。
理解“线”而非“格”
Grid 的行列是通过“网格线”（grid lines）来划分的。默认从 1 开始编号：左上角是第 1 条列线和第 1 条行线；每新增一列/行，就多一条线。所以一个 3×3 的网格，实际有 4 条列线（1–4）和 4 条行线（1–4）。
这意味着：
-
grid-column: 1 / 3表示从第 1 列线开始，到第 3 列线结束 → 跨越第 1、2 两列 -
grid-row: 2 / 4表示从第 2 行线开始，到第 4 行线结束 → 跨越第 2、3 两行 - 结束线可以大于总线数（比如
/ -1指向最后一根线），超出部分会自动创建隐式轨道
常用写法与等价形式
以下写法效果相同，选可读性高的即可：
-
grid-column: 2 / 5→ 明确起止线号 -
grid-column: 2 / -1→ 从第 2 列线一直延伸到最后一条列线 -
grid-column: span 3→ 从当前位置向右跨 3 列（起始线自动推断） -
grid-column: span 2 / 4→ 跨 2 列，且结束于第 4 列线（起始线 = 2）
实战小技巧
跨区时注意避免重叠冲突，尤其当多个项目指定了相同区域：
- 后声明的项目会层叠在先声明的上面（类似 z-index 顺序）
- 用
z-index可手动调整堆叠顺序 - 想让标题横跨全部列？直接写
grid-column: 1 / -1 - 想让侧边栏从第 2 行起占满剩余所有行？写
grid-row: 2 / -1
别忘了配合 grid-area（更简洁）
如果已定义命名区域（如 grid-template-areas: "head head" "nav main"），可以直接用 grid-area: "head" —— 这比写四条线更直观。但需要提前规划好模板，适合整体布局固定的情况。
基本上就这些。关键不是记语法，而是养成“看线不看格”的习惯——画个草图标上线号，一写就准。
