Grid子元素如何跨行跨列_grid-row-span与grid-column-span解析

使用 grid-row 和 grid-column 配合 span 可实现子元素跨行跨列，如 grid-row: 2 / span 2；也可用 grid-area 简写，如 grid-area: 1 / 2 / span 2 / span 3，灵活控制布局范围。

在 CSS Grid 布局中，让子元素跨越多行或多列是常见需求。实现这一效果的关键属性是 grid-row 和 grid-column，而所谓的“grid-row-span”或“grid-column-span”并不是标准属性名，但可以通过 span 关键字来实现跨行跨列的效果。

使用 grid-row 和 grid-column 实现跨行跨列

CSS Grid 中并没有独立的 grid-row-span 或 grid-column-span 属性，但可以在 grid-row 和 grid-column 中使用 span 来指定跨越的轨道数量。

语法格式如下：

• grid-row: <起始行> / span <跨越行数>;
• grid-column: <起始列> / span <跨越列数>;

例如，让一个子元素从第2行开始，跨越2行：

.item {
  grid-row: 2 / span 2;
}

这表示该元素从第2行开始，占据2行的高度（即覆盖第2行和第3行）。

简写形式：grid-area

如果需要同时设置行列的起始位置和跨度，可以使用 grid-area 简写属性。

Levity

AI帮你自动化日常任务

206

查看详情

语法为：

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

也可以结合 span 使用：

• grid-area: 1 / 2 / span 2 / span 3; —— 从第1行第2列开始，跨2行3列
• grid-area: span 2 / span 2; —— 自动放置，但占据2行2列空间

实际示例

假设有一个 3×3 的网格布局：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
}
.box1 {
  grid-column: span 2;
  grid-row: span 2;
  background: lightblue;
}

上面的 .box1 会从默认起点开始，横向跨越2列，纵向跨越2行，占据左上角的 2×2 区域。

基本上就这些。通过 span 配合 grid-row、grid-column 或 grid-area，就能灵活控制子元素的跨行跨列布局，无需所谓“grid-row-span”这样的非标准属性。不复杂但容易忽略细节。

以上就是Grid子元素如何跨行跨列_grid-row-span与grid-column-span解析的详细内容，更多请关注php中文网其它相关文章！