css grid-row和grid-column如何跨行跨列

grid-row和grid-column用于控制网格项的行列跨度，支持起始/结束线或span语法，如grid-row:2/span3表示从第2行跨3行，grid-column类似；可结合grid-area简写属性同时设置行列范围，适用于复杂布局场景。

在 CSS Grid 布局中，grid-row 和 grid-column 可以用来控制网格项（grid item）在行和列上的起始和结束位置，从而实现跨行或跨列的效果。

grid-row 跨行

使用 grid-row 可以让一个元素跨越多行。它接受两种写法：起始行 / 结束行，或者只写起始行并配合 span 关键字。

例如：

• grid-row: 2 / 4; 表示从第 2 行开始，到第 4 行之前结束（即跨越第 2 和第 3 行，共 2 行）
• grid-row: 2 / span 3; 表示从第 2 行开始，跨越 3 行
• grid-row: span 2; 若未指定起始位置，浏览器会自动计算，默认从当前可用行开始

grid-column 跨列

grid-column 的用法与 grid-row 类似，用于控制元素在列方向上的跨度。

例如：

• grid-column: 1 / 3; 表示从第 1 列开始，跨越到第 3 列前（占 2 列）
• grid-column: span 2; 表示自动决定起始列，并向右跨越 2 列
• grid-column: 2 / span 4; 从第 2 列开始，跨越 4 列

简写属性与实际应用

你也可以将行和列一起设置：

立即学习“前端免费学习笔记（深入）”；

• grid-area: row-start / col-start / row-end / col-end;
• 比如 grid-area: 2 / 1 / 4 / 3; 表示从第 2 行第 1 列开始，到第 4 行第 3 列结束（跨 2 行 2 列）

这种设置在布局复杂区域（如页眉、侧边栏、卡片等）时非常实用。

基本上就这些。合理使用 span 和行列范围，能灵活控制元素的网格占据范围，不复杂但容易忽略细节。