什么是 CSS Grid 布局？
CSS Grid 布局是一种二维网格布局系统，可以在网格中灵活地定位和对齐元素。Grid 布局可以将容器分成行和列，然后将每个单元格用指定的行和列位置填充。
如何使用 grid-column-start 和 grid-column-end 控制单元格所跨越的列数？
在 Grid 布局中，可以使用 grid-column-start 和 grid-column-end 属性来控制单元格所跨越的列数。这两个属性都需要指定一个数字值，表示单元格的起始列和结束列。
例如，如果要将一个单元格跨越两列，可以将 grid-column-start 设置为 1，grid-column-end 设置为 3。代码如下：
----- - -------- ----- ---------------------- --------- ----- - ----- - ------------------ -- ---------------- -- -
在这个例子中，.grid 容器被分为四列，每列宽度相等。.cell 元素的起始列为第一列，结束列为第三列，因此它将跨越第一列和第二列。
如何使用 grid-column-start 和 grid-column-end 控制多个单元格的列数？
如果要控制多个单元格的列数，可以将它们分组，并将相同的 grid-column-start 和 grid-column-end 属性应用于组中的所有元素。
例如，如果要将两个单元格分别跨越第一列和第二列，可以将它们放在同一个组中，并将 grid-column-start 设置为 1，grid-column-end 设置为 3。代码如下：
----- - -------- ----- ---------------------- --------- ----- - ----------- - ------------------ -- ---------------- -- - ------- - --------------- -- ------------- -- - ------- - --------------- -- ------------- -- -
在这个例子中，.cell-1 和 .cell-2 元素都被包含在 .cell-group 组中，它们分别跨越第一列和第二列。.cell-1 元素的起始行为第一行，结束行为第二行；.cell-2 元素的起始行为第二行，结束行为第三行。
总结
使用 grid-column-start 和 grid-column-end 属性可以轻松地控制单元格所跨越的列数，从而实现更灵活的布局效果。在使用这两个属性时，需要注意将它们应用于正确的元素组，以实现预期的效果。
示例代码
---- -------------
---- ----------- ------------------
---- ----------- ------------
---- ----------- ------------------
---- ----------- ------------------
------
---- ----------- ------------------
---- ----------- ------------------
---- ----------- ------------------
------
-------
----- -
-------- -----
---------------------- --------- -----
--------- -----
-
----- -
-------- -----
----------------- --------
------- --- ----- -----
-
----------- -
------------------ --
---------------- --
-
------- -
--------------- --
------------- --
-
------- -
--------------- --
------------- --
-
------- -
--------------- --
------------- --
-
------- -
--------------- --
------------- --
------------------ --
---------------- --
-
------- -
--------------- --
------------- --
------------------ --
---------------- --
-
------- -
--------------- --
------------- --
------------------ --
---------------- --
-
--------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65fe94bbd10417a2229d4543