CSS grid-area 语法
在 CSS 中，grid-area 属性用于将网格子项放置到网格的特定区域中，或者通过指定起始和结束的网格线来定义子项所占据的区域。
grid-area 是一个简写属性，它包含以下 4 个子属性：
grid-area 最常见的用法是配合 grid-template-areas 属性，将具名网格子项直接放置到预定义的具名区域中。
语法：
grid-area: name;
grid-area: row-start / column-start / row-end / column-end;说明：
grid-area 属性可以接受 2 种取值。当 grid-area 取值为 name 时，此时该 name 是由 grid-template-areas 属性定义的区域名称。
当 grid-area 取值为 row-start / column-start / row-end / column-end 时，这是一个简写形式，用于同时设置 4 个子属性的值。
例如，grid-area: 1 / 2 / 3 / 4; 表示当前子项从第 1 行线开始，第 2 列线开始，到第 3 行线结束，第 4 列线结束。这意味着它将跨越第 1 和第 2 行，以及第 2 和第 3 列。
我们也可以使用 span <number> 或 span <name> 来表示跨越多少个轨道或直到哪个具名网格线。例如，grid-area: 1 / 1 / span 2 / span 3; 表示从第 1 行线和第 1 列线开始，并跨越 2 行和 3 列。
此外，小伙伴们还要清楚以下几点。
- 当使用具名区域时，grid-area 要求网格容器已经通过 grid-template-areas 定义了这些区域。
- 如果你同时定义了 grid-area 和独立的 grid-row-start 等属性，grid-area 会覆盖后者。
- 使用 grid-area: <name>; 的方式通常比使用网格线数字更具可读性和易于维护，尤其是在复杂的布局中。
注意: grid-area 属性只能用于网格容器的子项，即作为 display 取值为 grid 或 inline-grid 元素的子元素。
CSS grid-area 摘要
| 属于 | CSS grid 布局 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | auto / auto / auto / auto |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS grid-area 示例
接下来，我们通过几个简单的例子来讲解一下 CSS grid-area 属性是如何使用的。
示例 1：grid-area 取值为具名区域
<!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;
}
.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>页面效果如下图所示。
分析：
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-area 使用网格线定义子项位置和大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 列 */
grid-template-rows: repeat(3, 1fr); /* 3 行 */
width: 400px;
height: 300px;
background-color: lightskyblue;
}
.container > div {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid silver;
background-color: salmon;
}
.item-1 {
grid-area: 1 / 1 / 2 / 3; /* 从第 1 行线开始，第 1 列线开始，到第 2 行线结束，第 3 列线结束 (占据第 1 行、第 1-2 列) */
}
.item-2 {
grid-area: 1 / 3 / 3 / 5; /* 从第 1 行线开始，第 3 列线开始，到第 3 行线结束，第 5 列线结束 (占据第 1-2 行、第 3-4 列) */
}
.item-3 {
grid-area: 2 / 1 / 4 / 3; /* 从第 2 行线开始，第 1 列线开始，到第 4 行线结束，第 3 列线结束 (占据第 2-3 行、第 1-2 列) */
}
.item-4 {
grid-area: 3 / 3 / 4 / 5; /* 从第 3 行线开始，第 3 列线开始，到第 4 行线结束，第 5 列线结束 (占据第 3 行、第 3-4 列) */
}
</style>
</head>
<body>
<div class="container">
<div class="item-1">item 1（1 x 2）</div>
<div class="item-2">item 2（2 x 2）</div>
<div class="item-3">item 3（2 x 2）</div>
<div class="item-4">item 4（1 x 2）</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们定义了一个 4 列 3 行的网格容器。这意味着有 5 条垂直网格线 (1-5) 和 4 条水平网格线 (1-4)。
对于 item-1 来说，grid-area: 1 / 1 / 2 / 3; 表示它从第 1 行线和第 1 列线开始，到第 2 行线和第 3 列线结束。结果是它占据了第 1 行，并跨越了第 1 和第 2 列。
对于 item-2 来说，grid-area: 1 / 3 / 3 / 5; 表示它从第 1 行线和第 3 列线开始，到第 3 行线和第 5 列线结束。结果是它占据了第 1 和第 2 行，并跨越了第 3 和第 4 列。
当然了，小伙伴们可以自行推断一下 item-3 和 item-4。
示例 3：grid-area 使用 span 关键字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列 */
grid-template-rows: repeat(3, 1fr); /* 3行 */
width: 300px;
height: 300px;
background-color: lightskyblue;
}
.container > div {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid silver;
background-color: salmon;
}
.item-1 {
grid-area: 1 / 1 / auto / span 3; /* 从第 1 行线第 1 列线开始，行结束自动，跨越 3 列 */
}
.item-2 {
grid-area: 2 / 1 / span 2 / auto; /* 从第 2 行线第 1 列线开始，跨越 2 行，列结束自动 */
}
.item-3 {
grid-area: 2 / 2 / auto / span 1; /* 从第 2 行线第 2 列线开始，行结束自动，跨越 1 列 */
}
</style>
</head>
<body>
<div class="container">
<div class="item-1">子项 1 (跨 3 列)</div>
<div class="item-2">子项 2 (跨 2 行)</div>
<div class="item-3">子项 3</div>
<div class="item-4">子项 4</div>
<div class="item-5">子项 5</div>
<div class="item-6">子项 6</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
使用 span 关键字，可以让子项尺寸的定义更加直观，特别是在不需要精确计算结束网格线时。
对于 item-1 来说，grid-area: 1 / 1 / auto / span 3; 表示其从第 1 行线、第 1 列线开始，并横向跨越 3 列。auto 作为行结束线，意味着它只占据它开始的那一行。
对于 item-2 来说，grid-area: 2 / 1 / span 2 / auto; 表示其从第 2 行线、第 1 列线开始，并纵向跨越 2 行。auto 作为列结束线，意味着它只占据它开始的那一列。
对于 item-3 来说，grid-area: 2 / 2 / auto / span 1; 表示其占据第 2 行、第 2 列。
