CSS Grid 是一种强大的布局方式，它能够以一种直观的方式，帮助我们创建复杂的布局。在这篇文章中，我们将学习如何在 CSS Grid 中创作复合布局。
什么是复合布局？
复合布局是指通过组合多个不同的布局，来实现一种更为复杂的布局。这种布局通常由多个部分组成，并且每个部分都有自己的布局方式。
在 CSS Grid 中，我们可以使用多个网格，每个网格都有自己的行和列，来实现复合布局。这种方式可以让我们更加灵活地控制布局，同时还能够提高可维护性和可重用性。
如何创作复合布局？
1. 定义网格
首先，我们需要定义一个网格，它将成为我们复合布局的基础。我们可以使用 grid-template-rows 和 grid-template-columns 属性来定义网格的行和列：
.wrapper {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}在这个例子中，我们定义了一个包含 3 行和 3 列的网格。每一行和每一列都有相同的大小，都是 1/3。
2. 划分网格
接下来，我们需要将网格划分成多个部分。我们可以使用 grid-template-areas 属性来定义每个部分的位置和大小：
-- -------------------- ---- -------
-------- -
-------- -----
------------------- --------- -----
---------------------- --------- -----
--------------------
------- ------ -------
-------- ------- --------
------- ------ --------
-在这个例子中，我们将网格划分成了 3 个部分，分别是头部、侧边栏、内容和页脚。每个部分都有自己的位置和大小。
3. 填充内容
最后，我们需要将内容填充到每个部分中。我们可以使用 grid-area 属性来指定每个元素所在的位置：
-- -------------------- ---- ------- ------- - ---------- ------- - -------- - ---------- -------- - -------- - ---------- -------- - ------- - ---------- ------- -
在这个例子中，我们将每个元素都放置到了它们所属的部分中。这样，我们就完成了复合布局的创作。
示例代码
下面是一个完整的示例代码，它演示了如何在 CSS Grid 中创作复合布局：
-- -------------------- ---- -------
---- ----------------
------- ------------------------------
------ -------------------------------
----- ----------------
----------------
-------- ----- ----- --- ----- ----------- ---------- ---------
-------
------- ------------------------------
-------- -------------------- ---- -------
-------- -
-------- -----
------------------- --------- -----
---------------------- --------- -----
--------------------
------- ------ -------
-------- ------- --------
------- ------ --------
-
------- -
---------- -------
-
-------- -
---------- --------
-
-------- -
---------- --------
-
------- -
---------- -------
-结论
CSS Grid 是一种强大的布局方式，它能够帮助我们创建复杂的布局。在本文中，我们学习了如何在 CSS Grid 中创作复合布局，包括定义网格、划分网格和填充内容。通过这种方式，我们可以更加灵活地控制布局，同时还能够提高可维护性和可重用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6754fc861b963fe9cc51689e