CSS Grid 布局是一种强大的布局方式，可以让我们更加灵活地布局网页。在 CSS Grid 布局中，我们可以使用 grid-template-areas 和 grid-area 来实现自由布局。
grid-template-areas
grid-template-areas 可以让我们通过一个类似于表格的方式来定义网格布局。我们可以在 CSS 中使用 grid-template-areas 属性来定义一个网格布局，并为每个网格区域命名。例如，下面是一个简单的网格布局：
-- -------------------- ---- -------
-------- -
-------- -----
---------------------- --------- -----
------------------- --------- -----
--------------------
------- ------ -------
----- ---- --------
------- ------ --------
-
------- -
---------- -------
-
----- -
---------- -----
-
-------- -
---------- --------
-
------- -
---------- -------
-在上面的代码中，我们定义了一个 3x3 的网格布局，其中第一行有三个相同大小的列，第二行有两个列的大小相同，第三行有三个相同大小的列。我们还为每个网格区域命名了一个名称，例如 header、main、sidebar 和 footer。
接下来，我们可以在 HTML 中使用这些名称来定义每个网格区域的内容。例如：
<div class="wrapper"> <div class="header">Header</div> <div class="main">Main</div> <div class="sidebar">Sidebar</div> <div class="footer">Footer</div> </div>
在上面的代码中，我们使用了 grid-area 属性来将每个 HTML 元素放入其对应的网格区域中。例如，我们将 .header 元素放入了名为 header 的网格区域中。
grid-area
grid-area 可以让我们将一个 HTML 元素放入网格布局中的指定网格区域中。我们可以在 CSS 中使用 grid-area 属性来指定元素应该放置在哪个网格区域中。例如：
-- -------------------- ---- ------- -------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- - ------- - ---------- - - - - - - -- - ----- - ---------- - - - - - - -- - -------- - ---------- - - - - - - -- - ------- - ---------- - - - - - - -- -
在上面的代码中，我们使用 grid-area 属性将每个 HTML 元素放入其对应的网格区域中。例如，我们将 .header 元素放入了第一行的前三列中，也就是从第一行第一列到第一行第三列。我们使用 grid-area 属性的语法可以这样理解：
grid-area: row-start / column-start / row-end / column-end;
其中，row-start 和 column-start 分别指定元素应该放置在哪一行和哪一列的起始位置，row-end 和 column-end 分别指定元素应该放置在哪一行和哪一列的结束位置。
示例代码
下面是一个完整的示例代码，展示了如何使用 grid-template-areas 和 grid-area 实现自由布局：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------- ---- ------------
-------
-------- -
-------- -----
---------------------- --------- -----
------------------- --------- -----
--------------------
------- ------ -------
----- ---- --------
------- ------ --------
-
------- -
---------- -------
----------------- --------
-------- -----
----------- -------
-
----- -
---------- -----
----------------- --------
-------- -----
----------- -------
-
-------- -
---------- --------
----------------- --------
-------- -----
----------- -------
-
------- -
---------- -------
----------------- -----
------ -----
-------- -----
----------- -------
-
--------
-------
------
---- ----------------
---- ---------------------------
---- -----------------------
---- -----------------------------
---- ---------------------------
------
-------
-------在上面的代码中，我们定义了一个 3x3 的网格布局，并为每个网格区域命名了一个名称。然后，我们使用 grid-area 属性将每个 HTML 元素放入其对应的网格区域中。最后，我们通过 CSS 来为每个网格区域设置样式，以实现自由布局。
总结
CSS Grid 布局是一种强大的布局方式，可以让我们更加灵活地布局网页。在 CSS Grid 布局中，我们可以使用 grid-template-areas 和 grid-area 来实现自由布局。通过定义一个类似于表格的方式来定义网格布局，并为每个网格区域命名，我们可以更加清晰地理解布局结构。而通过使用 grid-area 属性，我们可以更加精确地控制每个 HTML 元素应该放置在哪个网格区域中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fffcb1d10417a222b3d7e5