通过grid-column和grid-row可直观控制元素跨列跨行；设置display: grid后，用grid-template定义行列，gap设间距；grid-column指定列起止线，如1/3跨两列，span 2自动跨列；grid-row同理控制行跨度；结合两者可实现二维扩展，或用grid-area简写为“行始/列始/行末/列末”；线号从1开始计数。
使用CSS Grid布局时，让元素跨列或跨行非常直观。通过grid-column和grid-row属性，可以精确控制网格项在网格容器中的位置和跨度。
定义网格容器
要启用Grid布局，先在父容器上设置display: grid，并用grid-template-columns和grid-template-rows划分行列结构。
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px 50px;
gap: 10px;
}
这会创建一个3×3的网格，每个单元格之间有10px的间距。
使用 grid-column 控制跨列
grid-column决定元素在列轴上的起始和结束位置。它可接受两个值：起始线和结束线，中间用斜杠分隔。
立即学习“前端免费学习笔记（深入）”；
-
grid-column: 1 / 3;表示从第1条网格线开始，跨越到第3条线（占两列） -
grid-column: 2 / 4;从第2列开始，跨到末尾前一列 - 也可简写为
grid-column: span 2;表示自动向后跨2列
例如，让某个子元素横跨前两列：
.item-a {
grid-column: 1 / 3;
}
使用 grid-row 控制跨行
grid-row作用与grid-column类似，但控制行方向。
-
grid-row: 1 / 3;从第1行开始，跨2行 -
grid-row: span 2;自动跨2行，起始位置由默认流决定 -
grid-row: 2 / 4;第2行到第4条线，覆盖中间两行
比如让一个元素纵向占据两行：
.item-b {
grid-row: 2 / 4;
}
同时控制行列实现二维跨越
结合grid-column和grid-row，可以让元素在二维空间中自由伸展。
- 一个元素跨2列且跨2行：
.item-c {
grid-column: 2 / 4;
grid-row: 2 / 4;
}
这个元素将从第2列第2行开始，向右下角扩展，覆盖四个原始单元格。
也可以使用简写形式grid-area来合并定义：
.item-c {
grid-area: 2 / 2 / 4 / 4;
}
格式为：grid-area: 行起始 / 列起始 / 行结束 / 列结束
基本上就这些。掌握grid-column和grid-row的线号定位方式，就能灵活实现各种复杂的网格布局效果。不复杂但容易忽略的是线号从1开始计数，而不是0。
