在 CSS Grid 布局中，我们可以使用 grid-column 和 grid-row 属性来设置单元格跨越的行列数，从而实现更加灵活的布局效果。本文将详细介绍如何使用这两个属性，并提供示例代码和实战指导，帮助读者更好地掌握这一技术。
grid-column 和 grid-row 属性是什么？
grid-column 和 grid-row 属性分别用于控制元素所占据的列数和行数。它们可以接受一个或多个值，其中：
- 单个值：表示元素占据一个单元格。
- 两个值：表示元素占据两个单元格，第一个值表示起始单元格，第二个值表示结束单元格。
- 更多值：表示元素跨越多个单元格，可以使用 / 符号来分隔起始和结束单元格。
如何使用 grid-column 和 grid-row 属性？
下面是一个简单的示例代码，展示如何使用 grid-column 和 grid-row 属性来控制元素的布局：
-- -------------------- ---- -------
---- -----------------------
---- ----------- --------------
---- ----------- --------------
---- ----------- --------------
---- ----------- --------------
------
-------
--------------- -
-------- -----
---------------------- --------- -----
------------------- --------- -------
--------- -----
-
----- -
----------------- -----
-------- -----
---------- -----
----------- -------
-
------ -
------------ - - --
--------- - - --
-
------ -
------------ --
--------- - - --
-
------ -
------------ --
--------- - - --
-
------ -
------------ - - --
--------- --
-
--------在这个示例中，我们创建了一个 3 行 3 列的网格布局，其中每个单元格的高度为 100px，单元格之间的间隔为 10px。然后，我们使用 grid-column 和 grid-row 属性来控制每个元素的位置和大小。
- .item1 占据了第一行的前两列（即第 1 列到第 2 列），并且只占据了第一行。
- .item2 占据了第一行的最后一列（即第 3 列），并且跨越了第一行和第二行。
- .item3 占据了第二行的第二列，同时跨越了第二行和第三行。
- .item4 占据了第三行的前一列（即第 1 列），并且只占据了第三行。
通过这些设置，我们可以实现非常灵活的布局效果，而无需使用复杂的嵌套结构或绝对定位。
实战指导：如何在项目中使用 grid-column 和 grid-row 属性？
在实际项目中，我们可以使用 grid-column 和 grid-row 属性来实现各种复杂的布局效果。以下是一些实用的技巧和指导：
1. 使用单个值
如果我们只需要让一个元素占据一个单元格，可以直接使用单个值来设置 grid-column 和 grid-row 属性。例如：
.item {
grid-column: 2;
grid-row: 3;
}这将使元素占据第二列和第三行的单元格。
2. 使用两个值
如果我们需要让一个元素跨越多个单元格，可以使用两个值来设置 grid-column 和 grid-row 属性。例如：
.item {
grid-column: 2 / 4;
grid-row: 1 / 3;
}这将使元素占据第二列到第四列和第一行到第三行的单元格。
3. 使用更多值
如果我们需要让一个元素跨越多个单元格，并且跨越的单元格不是一个矩形区域，可以使用更多值来设置 grid-column 和 grid-row 属性。例如：
.item {
grid-column: 1 / 3 4 / 6;
grid-row: 1 / 2 3 / 4;
}这将使元素占据第一列到第三列和第四列到第六列的单元格，以及第一行到第二行和第三行到第四行的单元格。注意，这些值之间用 / 符号分隔。
4. 使用自动布局
当我们不需要手动设置每个元素的位置和大小时，可以使用自动布局来实现更加灵活的布局效果。例如：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}这将使每个单元格的宽度自适应，最小宽度为 200px，最大宽度为 1fr。当屏幕宽度变化时，单元格的数量和宽度都会自动调整，以适应不同的视口尺寸。
总结
CSS Grid 布局是一种强大而灵活的布局方式，可以帮助我们实现各种复杂的布局效果。使用 grid-column 和 grid-row 属性可以轻松控制元素的位置和大小，从而实现更加灵活的布局效果。在实际项目中，我们可以根据需要使用不同的设置来实现各种布局需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ffd3eed10417a222b11bc7