通过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;
}
.header {
grid-column: 1 / 3;
background: #4CAF50;
}
.sidebar {
grid-row: 1 / 3;
background: #2196F3;
}
这样，.header 占据前两列第一行，.sidebar 从第一行延伸到第三行，其余元素会自动填充剩余空间。
基本上就这些。只要理解了网格线编号和 span 的用法，跨行跨列布局就很直观。不复杂但容易忽略的是线号从1开始计数，而不是0。
