在CSS Grid布局中，通过grid-column和grid-row属性可让子元素跨列或跨行。1. 使用grid-column指定起始和结束线（如1/3）或用span定义跨越列数（如span 2），实现横向跨越；2. 利用grid-row设置行范围（如2/4）或span值（如span 2），实现纵向跨越；3. 同时设置grid-column和grid-row可使元素在二维方向扩展，占据多个网格区域；4. 配合justify-self、align-self控制对齐，gap属性设置间距，提升布局灵活性。结合开发者工具调试更高效。
在 CSS Grid 布局中，让子元素跨行或跨列主要通过 grid-column 和 grid-row 属性来实现。你可以灵活控制元素占据多个网格轨道，并通过调整起始和结束线来精确定位。
1. 子元素跨列（横向跨越）
使用 grid-column 可以让一个子元素横跨多列。语法是指定起始线和结束线：
grid-column:例如，让一个元素从第1列开始，跨越到第3列：
.item {
grid-column: 1 / 3;
}也可以使用 span 关键字表示跨越的列数：
立即学习“前端免费学习笔记（深入）”；
.item {
grid-column: span 2;
}这表示从当前位置向右跨2列。
2. 子元素跨行（纵向跨越）
使用 grid-row 实现纵向跨越：
grid-row:
比如让元素从第2行开始，跨2行：
.item {
grid-row: 2 / 4;
}或者用 span 简写：
.item {
grid-row: span 2;
}3. 同时跨行和跨列
若要让元素在二维方向都跨越，同时设置两个属性即可：
.item-wide {
grid-column: 1 / 4; /* 跨3列 */
grid-row: 1 / 3; /* 跨2行 */
}这样该元素会占据左上角的 3列×2行 区域。
4. 调整对齐方式与间距
当元素跨行跨列后，可能需要调整其内部内容对齐或与其他元素的间距：
- 使用 justify-self 控制水平对齐：
justify-self: start | end | center | stretch; - 使用 align-self 控制垂直对齐：
align-self: start | end | center | stretch; - 通过 gap 在父容器中统一设置子元素间距：
grid-gap: 10px; /* 或 gap: 10px; */
基本上就这些。掌握 grid-column、grid-row 和 span 的用法，再配合对齐属性，就能自由控制 Grid 子元素的布局形态。实际使用时建议结合浏览器开发者工具查看网格线位置，便于调试。
