通过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 跨列跨行
要让一个子元素跨越多列或多行，可以使用以下属性：
- grid-column: start / end; — 控制列的起始和结束线
- grid-row: start / end; — 控制行的起始和结束线
例如，让一个元素从第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行 */ }
也可以简写为：
.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。