CSS Grid 是一种经典的前端布局技术，可以轻松实现复杂的布局和设计。Grid 让开发者可以定义网格布局，将网站划分为不同区域，并在这些区域内放置网页元素。
Grid 定义了一种模板语法，用于定义网页布局。在定义网页布局时，我们需要用到模板区域定义。模板区域定义允许我们将网页分割成多个区域，并为每个区域定义相应的属性。
本文将详细介绍 CSS Grid 的模板区域定义及其应用。如果你希望深入了解 CSS Grid 技术，本文对你会有很大帮助。
简单的 Grid 布局
在介绍 Grid 模板区域定义之前，我们先回忆一下简单的 Grid 布局。以 3 列和 4 行网格为例：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}以上的 CSS 代码定义了一个 3 列和 4 行的 Grid 网格布局。
Grid 布局指定了每个元素在 Grid 中的位置。例如，可以将网格的第一个行第一列的方格命名为 "header"，将第一行第二列的方格命名为 "sidebar"，将第二行第二列的方格命名为 "content"，将第三行第二列的方格命名为 "footer"。然后，通过 Grid 模板区域定义为每个元素添加一些属性。
Grid 模板区域定义
在网格布局中，我们需要为每个区域定义相应的属性，例如宽度、高度、对齐方式等等。Grid 模板区域定义允许我们将网页划分成多个区域，为每个区域定义属性，然后将元素放置在相应的区域中。
定义网格区域
我们可以使用 grid-template-areas 属性来为网格区域命名。grid-template-areas 接受一个由区域名称组成的字符串数组：
.grid-container {
grid-template-areas:
"header header header"
"sidebar content content"
"sidebar content content"
"footer footer footer";
}在以上代码中，我们为每个区域定义了一个名称。这些名称形成一个字符串数组，元素之间用空格隔开。每个网格区域名必须放在引号中，且每个区域名占据一行。
指定元素位置
在网格布局的模板区域中，可以通过为元素指定位置命名，将元素放置在网格中。以下是一个 CSS Grid 布局结合模板区域的完整示例:
<div class="grid-container"> <header class="header">Header</header> <div class="sidebar">Sidebar</div> <div class="content">Content</div> <footer class="footer">Footer</footer> </div>
-- -------------------- ---- -------
--------------- -
-------- -----
--------- -----
---------------------- --------- -----
--------------------
------- ------ -------
-------- ------- --------
-------- ------- --------
------- ------ --------
-
------- -
---------- -------
-
-------- -
---------- --------
-
-------- -
---------- --------
-
------- -
---------- -------
-在以上示例代码中，我们使用了 grid-gap 属性来设置格子之间的间隔。然后，使用 grid-template-columns 属性定义了 3 列。最后，我们为每个元素指定了相应的位置，包括 header、sidebar、content 和 footer。
由于我们已经为网格中的区域指定了名称，因此可以通过 grid-area 属性为元素指定它所在的区域。
结论
通过用 Grid 模板区域定义来定义 CSS Grid 布局，我们可以轻松实现复杂的布局和设计。Grid 模板区域定义方法简单，对于大多数情况下，可以通过一个网格容器、三个属性和可选的 grid-area 属性来实现。如果你没有提供 grid-area 属性，则可以使用该未命名元素的上下文猜测位置。这个方法很强大，可以为网面或大面积图形提供简单的模板。因此，Grid 模板区域定义是前端开发中至关重要的一环。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677207526d66e0f9aad3cc58