CSS Grid 是一个强大的布局系统，它可以帮助我们轻松地创建复杂的网格布局。在创建网格布局时，有时候我们需要让某些元素自动横跨多行或多列，这时候就需要使用 grid-row 和 grid-column 属性来实现。
grid-row 和 grid-column 属性
grid-row 和 grid-column 属性用于指定元素在网格布局中的行和列位置。这两个属性都有两种用法：
- 指定起始位置和结束位置，例如 grid-row: 1 / 3; 表示元素从第一行到第三行。
- 指定起始位置和跨度，例如 grid-column: 2 / span 3; 表示元素从第二列开始，横跨三列。
自动横跨多行或多列
有时候，我们需要让某些元素自动横跨多行或多列，例如一个表格中的表头。这时候，我们可以使用 grid-column-start 和 grid-column-end 属性来实现。
.header {
grid-column-start: 1;
grid-column-end: -1;
}上面的代码中，-1 表示结束位置为网格布局中的最后一列，这样就可以让元素横跨整个网格布局。
同样的，我们也可以使用 grid-row-start 和 grid-row-end 属性来让元素自动横跨多行。
.header {
grid-row-start: 1;
grid-row-end: -1;
}示例代码
下面是一个简单的示例，演示了如何使用 grid-column-start 和 grid-column-end 属性来让表头自动横跨整个表格：
-- -------------------- ---- ------- ---- ---------------- ---- ----------------------- ---- ----------------------- ---- ----------------------- ---- ----------------------- ---- ----------------------- ---- ----------------------- ---- ----------------------- ------
-- -------------------- ---- ------- -------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- ---- ----- - ------- - ------------------ -- ---------------- --- ----------------- ----- - ----- - ----------------- ----- -
在上面的代码中，我们创建了一个 3 列 2 行的网格布局，然后让表头自动横跨整个表格。
结论
使用 grid-row 和 grid-column 属性可以帮助我们轻松地创建复杂的网格布局。当需要让某些元素自动横跨多行或多列时，可以使用 grid-column-start 和 grid-column-end 或 grid-row-start 和 grid-row-end 属性来实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6753f9b91b963fe9cc4b5b74