介绍
CSS Grid 布局是一种强大的布局方式，可以轻松地创建复杂的网格布局。在 Grid 布局中，我们可以使用 grid-template-areas 和 grid-area 属性来控制单元格所在区域和位置。这些属性可以让我们更加灵活地控制布局，使其更加符合我们的需求。
grid-template-areas
grid-template-areas 属性可以让我们在网格中定义命名区域。我们可以使用任何名称来定义区域，但是这些名称必须是唯一的。在使用 grid-template-areas 定义区域时，我们可以使用句点 . 来表示一个空单元格，使用引号来将区域名称括起来。
下面是一个示例，演示如何使用 grid-template-areas 属性来定义一个包含四个单元格的网格布局：
-- -------------------- ---- -------
---------- -
-------- -----
--------------------
------- -------
-------- -----
------- --------
---------------------- --- ----
------------------- ----- --- -----
-在上面的示例中，我们定义了三个命名区域：header、sidebar 和 footer。我们还使用了句点 . 来表示空单元格。在这个布局中，我们使用了两个列，第一列的宽度为 1fr，第二列的宽度为 3fr。我们还定义了三个行，分别为 100px、1fr 和 50px。
grid-area
grid-area 属性可以让我们将一个元素放置在一个命名区域中。我们可以使用区域的名称来指定要放置元素的位置。下面是一个示例，演示如何使用 grid-template-areas 和 grid-area 属性来放置元素：
-- -------------------- ---- ------- ------- - ---------- ------- - -------- - ---------- -------- - ----- - ---------- ----- - ------- - ---------- ------- -
在上面的示例中，我们使用了 grid-area 属性来将元素放置在命名区域中。例如，我们将 .header 元素放置在 header 区域中，将 .sidebar 元素放置在 sidebar 区域中，以此类推。
示例代码
下面是一个完整的示例代码，演示如何使用 grid-template-areas 和 grid-area 属性来控制单元格所在区域和位置：
-- -------------------- ---- -------
--------- -----
------
------
-------
---------- -
-------- -----
--------------------
------- -------
-------- -----
------- --------
---------------------- --- ----
------------------- ----- --- -----
--------- -----
-
------- -
---------- -------
----------------- -----
-
-------- -
---------- --------
----------------- -----
-
----- -
---------- -----
----------------- -----
-
------- -
---------- -------
----------------- -----
-
--------
-------
------
---- ------------------
---- ---------------------------
---- -----------------------------
---- ----------------- -------------
---- ---------------------------
------
-------
-------在上面的示例中，我们创建了一个包含四个单元格的网格布局。我们使用 grid-template-areas 属性来定义命名区域，使用 grid-template-columns 和 grid-template-rows 属性来定义列和行。我们还使用 grid-gap 属性来定义单元格之间的间距。
然后，我们将每个元素放置在相应的命名区域中，使用 grid-area 属性来指定位置。最后，我们为每个元素设置了不同的背景颜色，以便更好地区分它们。
结论
使用 grid-template-areas 和 grid-area 属性可以让我们更加灵活地控制 Grid 布局中单元格的位置和区域。我们可以使用这些属性来定义命名区域，并将元素放置在相应的区域中。这些属性可以让我们轻松地创建复杂的网格布局，使其更加符合我们的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675fd04703c3aa6a56f94278