css Grid子元素跨多列多行布局

通过 grid-column和 grid-row 属性可实现css Grid 子元素跨行跨列布局，支持指定起始结束线或使用 span 定义跨越数量，如 grid-column: 1 / span 2 使元素从第 1 列开始跨越 2 列，结合网格线编号（从 1 开始）灵活控制二维布局。

CSS Grid 布局中的子元素可以轻松实现跨多列或多行的效果，这主要通过 grid-column 和 grid-row 属性来控制。你可以指定元素从哪一列或行开始，到哪一列或行结束，从而实现灵活的二维布局。

1. 使用 grid-column 和 grid-row 跨列跨行

要让一个子元素跨越多列或多行，可以使用以下属性：

例如，让一个元素从第 1 列开始，跨越到第 3 列（即占两列），并从第 1 行到第 3 行（占两行）：

.item {grid-column: 1 / 3;   grid-row: 1 / 3;}

2. 使用 span 简化写法

如果你不想计算结束线，可以用 span 来指定跨越的网格数量。

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

.item {grid-column: 1 / span 2;  /* 从第 1 列开始，跨越 2 列 */   grid-row: 1 / span 2;     /* 从第 1 行开始，跨越 2 行 */}

也可以简写为：

喵记多

喵记多 – 自带助理的 ai 笔记

27

查看详情

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

此时会自动从当前可用的起始位置开始占位。

3. 实际布局示例

假设我们要创建一个 3×3 的网格，其中一个标题区域横跨顶部两列，一个侧边栏纵向占两行：

.container {display: grid;   grid-template-columns: 1fr 1fr 1fr;   grid-template-rows: auto auto auto;   gap: 10px;} <p>.header {grid-column: 1 / 3; background: #4CAF50;}</p><p>.sidebar {grid-row: 1 / 3; background: #2196F3;}</p>

这样，.header 占据前两列第一行，.sidebar 从第一行延伸到第三行，其余元素会自动填充剩余空间。

基本上就这些。只要理解了网格线编号和 span 的用法，跨行跨列布局就很直观。不复杂但容易忽略的是线号从 1 开始计数，而不是 0。

以上就是