使用grid-column、grid-row和grid-area可实现CSS Grid子元素跨行跨列布局，分别控制列、行及行列范围，支持起止线和span语法，适用于仪表盘等复杂布局。
在 CSS Grid 布局中，让子元素跨行或跨列非常直观，主要通过 grid-column 和 grid-row 属性来控制元素的跨度。也可以使用简写属性 grid-area 来同时定义行列起止位置。
1. 子元素跨列（横向跨越）
使用 grid-column 可以指定一个子元素从哪一列开始，到哪一列结束。
语法：- grid-column: 起始线 / 结束线;
- 也可以用 span 表示跨越几列
示例：
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
}
.item {
grid-column: 1 / 3; / 从第1条线开始，到第3条线结束，即占2列 /
}
/ 或者 /
.item {
grid-column: span 2; / 占据2列，自动计算起始位置 /
}
2. 子元素跨行（纵向跨越）
使用 grid-row 控制元素在行方向上的跨度。
立即学习“前端免费学习笔记（深入）”；
语法：- grid-row: 起始线 / 结束线;
- 同样支持 span 写法
示例：
.item {
grid-row: 2 / 4; /* 从第2行开始，到第4行前结束，占2行 */
}
/* 或者 */
.item {
grid-row: span 3; /* 纵向跨越3行 */
}
3. 同时跨行和跨列（使用 grid-area）
当需要同时设置行列跨度时，可以用 grid-area 简写属性。
语法：- grid-area: 行起始 / 列起始 / 行结束 / 列结束;
示例：
.item {
grid-area: 1 / 2 / 3 / 4;
/* 第1行开始，第2列开始，第3行结束，第4列结束 */
}
这个元素将占据从第1行到第3行（跨2行），第2列到第4列（跨2列）的区域。
4. 实际布局示例
常见于仪表盘或卡片布局：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px 100px;
gap: 10px;
}
.header { grid-column: span 3; } / 横跨3列 /
.sidebar { grid-row: span 2; } / 纵跨2行 /
.main { grid-area: 2 / 2 / 4 / 4; } / 多维跨越 /
基本上就这些方法。掌握 grid-column、grid-row 和 grid-area 的使用，就能灵活实现各种跨行跨列布局，不复杂但容易忽略细节。
