CSS grid-template-areas 语法
在 CSS 中，grid-template-areas 属性用于通过命名网格区域来定义网格布局。
语法：
grid-template-areas: none | 字符串列表;说明：
grid-template-areas 属性的默认值是 none，表示没有定义任何具名网格区域。如果不需要通过命名区域来布局，可以不设置此属性。
grid-template-areas 属性取值可以是一个字符串列表，每个字符串代表网格中的一行，字符串之间使用空格隔开。
对于字符串列表这种取值，小伙伴们要清楚以下几点。
- 相同名称的重复单词：表示这些单元格合并为一个具名区域。例如，grid-template-areas: header header header; 定义了一个名为 “header” 的区域，跨越三个列。
- 句点（.）：代表一个空的网格单元格，即该单元格不属于任何具名区域。
- 引号（"）：必须使用引号将每个行定义括起来。
- 网格区域的形状：具名区域必须是矩形。例如，你不能创建一个 L 形或 Z 形的区域。
- 名称必须有效：网格区域的名称不能包含空格，不能以数字开头，也不能是保留关键字（如 span）。
注意:
- grid-template-areas 属性只能用于网格容器本身，即定义 display 取值为 grid 或 inline-grid 的元素。
- 使用 grid-template-areas 必须首先通过 grid-template-columns 和 grid-template-rows 定义好网格的行和列结构，否则 grid-template-areas 将无法正确映射到网格单元格。
- grid-template-areas 和 grid-area 都是配合一起使用的，其中 grid-template-areas 是用于父元素（areas 后面有 “s”），grid-area 是用于子元素（area 后面没有 “s”）。
CSS grid-template-areas 摘要
| 属于 | CSS grid 布局 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | none |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS grid-template-areas 示例
接下来，我们通过几个简单的例子来讲解一下 CSS grid-template-areas 属性是如何使用的。
示例 1：grid-template-areas 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"a1 a1 a2"
"a1 a1 a2"
"a3 a3 a3";
width: 300px;
height: 300px;
}
.container > div {
box-sizing: border-box;
border: 1px dashed gray;
}
.container > div:nth-child(1) {
grid-area: a1;
background-color: red;
}
.container > div:nth-child(2) {
grid-area: a2;
background-color: green;
}
.container > div:nth-child(3) {
grid-area: a3;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;上面代码表示将父元素划分为 3×3 个网格。
grid-template-areas:
"a1 a1 a2"
"a1 a1 a2"
"a3 a3 a3";上面代码表示给每个网格一个命名，相同命名的网格最终会合并在一起。这里需要注意 grid-template-areas 的取值，有多少行就用多少行的值，每一行的值需要用英文双引号包含起来。
示例 2：grid-template-areas 更多应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "a1 a2 a3";
width: 300px;
height: 300px;
background-color: skyblue;
}
.container > div {
box-sizing: border-box;
border: 1px dashed gray;
}
.item-1 {
grid-area: a1;
background-color: red;
}
.item-2 {
grid-area: a2;
background-color: green;
}
.item-3 {
grid-area: a3;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
父元素被划分为 3×3 个网格，grid-template-areas: "a1 a2 a3"; 表示只给第一行划分区域，第 1 个网格占用 a1，第 2 个网格占用 a2，第 3 个网格占用 a3，这里是没太多问题的。
如果将 grid-template-areas: "a1 a2 a3"; 改为 grid-template-areas: "a3 a1 a2";，此时效果如下图所示。
如果将 grid-template-areas: "a1 a2 a3"; 改为下面代码，此时效果如下图所示。
grid-template-areas:
"a1 . ."
". a2 ."
". . a3";
这里有一个很有用的技巧，那就是如果某个单元格（网格）不需要被命名，则可以使用点号（.）来占位。也就是说，上面例子的 grid-template-areas: "a1 a2 a3"; 其实等价于下面代码，小伙伴们可以自行试一下。
grid-template-areas:
"a1 a2 a3"
". . ."
". . .";如果将 grid-template-areas: "a1 a2 a3"; 改为下面代码，此时效果如下图所示。
grid-template-areas:
"a1 a1 ."
". a2 ."
". a3 a3";
从上面可以看出，grid-tempalte-areas 属性是非常灵活的，它可以很方便地帮助我们实现各种组合布局。
