CSS Grid 布局是一种强大的布局方式，在前端开发中广泛应用。它允许开发者通过一个灵活的网格系统来对页面布局进行控制。其中，CSS Grid 布局中一个重要的概念就是网格组（Grid Areas）。一个网格组是由多个网格单元格组成的，而在实际应用中，我们常常需要将不同网格组之间的项目进行传递、拼合或者交换位置。本文将重点介绍如何利用 CSS Grid 布局来实现这些效果。
常用属性
在 CSS Grid 布局中，一个网格组由多个网格单元格组成。一个网格单元格是由一个 row 和一个 column 组成的。
在将多个网格组组合起来的过程中，我们先来了解一些常用的 CSS Grid 布局属性:
grid-area
定义一个网格单元格，并指定其在网格区域中的位置。
.item {
grid-area: 1 / 1 / 3 / 3;
}grid-template-areas
定义一个网格区域（即一个网格组）。
-- -------------------- ---- -------
---------- -
-------- -----
---------------------- ----- ----- ------
------------------- ----- ----- ------
--------------------
------- ------ -------
----- ---- --------
------- ------ --------
-grid-column
定义一个网格单元格，并指定其在网格行中的位置，例如：
.item {
grid-column: 1 / span 2;
}grid-row
定义一个网格单元格，并指定其在网格列中的位置
.item {
grid-row: 2 / 4;
}项目的传递方式
在 CSS Grid 布局中，我们可以通过修改网格单元格的位置，来实现项目在网格组之间的传递。其中，我们需要特别注意以下两个问题：
- 在使用 grid-area 定义网格单元格时，定义的位置最好是连续的。
- 要小心使用 justify-self 和 align-self 属性，因为它们会覆盖 grid-area 定义的位置值。
把项目从一个行网格组传递到另一个行网格组
下面是一个例子：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ------- ------------------- --------- ------- - ------ - ---------- - - - - - - -- - ------ - ---------- - - - - - - -- - ------ - ---------- - - - - - - -- -
在这个例子中，我们定义了一个网格组，其中包括 4 个网格单元格（也就是四个 item）。现在，我们想要让它们的位置发生变化，把第二行第一个（item3）传递到第一行第二个（item2）。
我们可以使用以下步骤来实现这个变化：
- 需要增加一个网格列，因为 item2 需要移到第二列中。
- 修改 item2 和 item3 的位置。在此示例中，我们需要将 item3 移动到第二行第二列，item2 移动到第一行第二列。通过设置 grid-area 属性，我们可以将 item2 的位置修改为 "1 / 2 / 2 / 3"，将 item3 的位置修改为 "2 / 2 / 3 / 3"。
修改后的代码如下：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ------- ------------------- --------- ------- - ------ - ---------- - - - - - - -- - ------ - ---------- - - - - - - -- - ------ - ---------- - - - - - - -- -
把项目从一个列网格组传递到另一个列网格组
在 CSS Grid 布局中，我们还可以把项目从一个列网格组传递到另一个列网格组。下面是一个例子：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ------- ------------------- --------- ------- - ------ - ---------- - - - - ---- - - -- - ------ - ---------- - - - - - - -- - ------ - ---------- - - - - - - -- -
在这个例子中，我们定义了一个网格组，其中包括 4 个网格单元格（也就是四个 item）。现在，我们想要让它们的位置发生变化，把第二列第一个（item2）传递到第一列第二个（item1）。
修改的步骤如下：
- 需要增加一个网格行，因为 item1 需要移到第二行中。
- 修改 item1 和 item2 的位置。通过设置 grid-area 属性，我们可以将 item1 的位置修改为 "1 / 2 / span 2 / 3"，将 item2 的位置修改为 "1 / 1 / 2 / 2"。
修改后的代码如下：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ------- ------------------- --------- ------- - ------ - ---------- - - - - ---- - - -- - ------ - ---------- - - - - - - -- - ------ - ---------- - - - - - - -- -
项目的拼合方式
在 CSS Grid 布局中，我们还可以使用网格单元格拼合的方式来对不同的网格组进行组合。与传递方式类似，我们需要遵循以下两个原则：
- 在使用 grid-area 定义网格单元格时，定义的位置最好是连续的。
- 要小心使用 justify-self 和 align-self 属性，因为它们会覆盖 grid-area 定义的位置值。
将 4 个单元格组合成一个
下面是一个例子：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ------- ------------------- --------- ------- - ------ - ---------- - - - - - - -- - ------ - ---------- - - - - - - -- - ------ - ---------- - - - - - - -- - ------ - ---------- - - - - - - -- -
现在，我们想要将这四个单元格组合成一个。我们可以使用以下 CSS：
.container {
grid-template-areas:
"combined";
}
.combined {
grid-area: 1 / 1 / 3 / 3;
}这个例子中，我们使用了 grid-template-areas 属性来定义一个网格区域，并将四个单元格组合成了其中的一个。
项目的交换方式
在 CSS Grid 布局中，我们还可以使用网格单元格交换的方式来对不同的网格组进行组合。交换方式与拼合的方式非常相似，以下是一个例子：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ------- ------------------- --------- ------- - ------ - ---------- - - - - - - -- - ------ - ---------- - - - - - - -- - ------ - ---------- - - - - - - -- - ------ - ---------- - - - - - - -- -
现在，我们想要将第一行和第二行交换位置，可以使用以下的 CSS：
.container {
grid-template-areas:
"item3 item4"
"item1 item2";
}这个例子中，我们使用了 grid-template-areas 属性来定义一个网格区域，并将第一行和第二行交换了位置。
总结
本文讨论了如何使用 CSS Grid 布局来在不同的网格组之间传递、拼合和交换项目。在实际的开发中，我们可以结合这些技巧来实现灵活的布局效果，从而提高页面的用户体验和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa23d748841e9894650896