CSS Grid 是一种强大的布局工具，可以轻松地实现复杂的布局。其中，最常用的就是跨列与跨行布局。本文将介绍 CSS Grid 中如何使用跨列与跨行来实现各种布局。
跨列布局
跨列布局是一种在网格布局中跨越多行的技术。使用跨列布局可以把网格的元素跨越多列，从而生成更复杂的布局。
对于网格中的一个元素，我们可以通过以下的方式来实现它的跨列效果：
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- --------- ----- --------- ---- - ------- - ------------ - ----- -- -- -- - - -- -
在上面的代码中，我们指定了一个包含四列的网格布局，然后通过 grid-column 属性来让 .item-1 元素跨越第一列和第二列，从而实现跨列效果。
对于网格中的多个元素，我们可以通过以下的方式来实现它们的跨列效果：
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- --------- ----- --------- ---- - ------- - ------------ - ----- -- -- -- - - -- - ------- - ------------ - ----- -- -- -- - - -- -
在上面的代码中，我们实现了两个元素的跨列布局。.item-1 元素跨越第一列和第二列，.item-2 元素跨越第三列和第四列。
跨行布局
跨行布局是一种在网格布局中跨越多列的技术。使用跨行布局可以把网格的元素跨越多行，从而生成更复杂的布局。
对于网格中的一个元素，我们可以通过以下的方式来实现它的跨行效果：
-- -------------------- ---- ------- ----- - -------- ----- ------------------- --------- ----- --------- ---- - ------- - --------- - ----- -- -- -- - - -- -
在上面的代码中，我们指定了一个包含四行的网格布局，然后通过 grid-row 属性来让 .item-1 元素跨越第一行和第二行，从而实现跨行效果。
对于网格中的多个元素，我们可以通过以下的方式来实现它们的跨行效果：
-- -------------------- ---- ------- ----- - -------- ----- ------------------- --------- ----- --------- ---- - ------- - --------- - ----- -- -- -- - - -- - ------- - --------- - ----- -- -- -- - - -- -
在上面的代码中，我们实现了两个元素的跨行布局。.item-1 元素跨越第一行和第二行，.item-2 元素跨越第三行和第四行。
组合跨列与跨行
在实际中，我们经常需要同时使用跨列与跨行来实现复杂的布局。我们可以通过以下的方式来实现：
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- --------- ---- - ------- - ------------ - ----- -- -- -- - - -- --------- - ----- -- -- -- - - -- - ------- - ------------ - ----- -- -- -- - - -- --------- - ----- -- -- -- - - -- - ------- - ------------ - ----- -- -- -- - - -- --------- - ----- -- -- -- - - -- -
在上面的代码中，我们实现了三个元素的跨列与跨行布局。.item-1 元素跨越第一列和第二列，跨越第一行和第二行，.item-2 元素跨越第三列和第四列，跨越第一行和第二行，.item-3 元素跨越前四列，跨越第三行和第四行。
总结
CSS Grid 的跨列与跨行技术是实现复杂布局的重要手段。通过本文的介绍，读者可以了解到如何使用 CSS Grid 实现跨列和跨行布局，并可以根据需要组合使用这两种技术，以生成不同的布局。
代码示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ---- ---------------
-------
----- -
-------- -----
---------------------- --------- -----
------------------- --------- -----
--------- ----
-
------- -
------------ - ----- -- -- -- - - --
--------- - ----- -- -- -- - - --
----------------- -------
-
------- -
------------ - ----- -- -- -- - - --
--------- - ----- -- -- -- - - --
----------------- ----
-
------- -
------------ - ----- -- -- -- - - --
--------- - ----- -- -- -- - - --
----------------- -----
-
------- -
------------ - - ---- -- -- -- - - --
--------- - - ---- -- -- -- - - --
----------------- ------
-
--------
-------
------
---- -------------
---- ------------------- -------
---- ------------------- -------
---- ------------------- -------
---- ------------------- -------
------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496f02348841e989441c5b9