CSS网格布局中的grid-area属性用于指定网格元素在网格容器中占据的区域，既可以直接使用预定义的区域名称，也可以通过指定网格线来定义区域的范围，是实现复杂网格布局的重要属性。
grid-area的基本语法
grid-area属性有以下几种常用的语法形式：
- 单值形式：
grid-area: <area-name>，使用grid-template-areas定义的区域名称 - 四值形式：
grid-area: <row-start> / <column-start> / <row-end> / <column-end>，分别指定区域的起始行、起始列、结束行、结束列 - 简化形式：可以省略部分值，默认使用auto填充
配合grid-template-areas使用
这是最常见的使用场景，先通过grid-template-areas定义网格的整体区域划分，再给子元素设置grid-area指定对应的区域名称。
/* 容器样式 */
.grid-container {
display: grid;
grid-template-columns: 200px 1fr 150px;
grid-template-rows: 80px 1fr 60px;
/* 定义三个区域：头部、主体、侧边栏、底部 */
grid-template-areas:
"header header header"
"sidebar main extra"
"footer footer footer";
height: 500px;
gap: 10px;
}
/* 子元素指定区域 */
.header {
grid-area: header;
background-color: #f0f0f0;
}
.sidebar {
grid-area: sidebar;
background-color: #e0e0e0;
}
.main {
grid-area: main;
background-color: #d0d0d0;
}
.extra {
grid-area: extra;
background-color: #c0c0c0;
}
.footer {
grid-area: footer;
background-color: #b0b0b0;
}
对应的HTML结构如下：
<div class="grid-container">
<div class="header">头部区域</div>
<div class="sidebar">侧边栏</div>
<div class="main">主体内容</div>
<div class="extra">额外区域</div>
<div class="footer">底部区域</div>
</div>
使用网格线定义区域范围
如果不想预先定义区域名称，也可以直接通过grid-area指定四条网格线来定义元素占据的范围，网格线可以是数字也可以是自定义的名称。
.grid-container-2 {
display: grid;
grid-template-columns: [col1] 100px [col2] 1fr [col3] 100px [col4];
grid-template-rows: [row1] 60px [row2] 1fr [row3] 60px [row4];
height: 400px;
gap: 10px;
}
/* 元素占据第2行到第3行，第2列到第3列的区域 */
.content-box {
grid-area: row2 / col2 / row3 / col3;
background-color: #a0d8ef;
}
对应的HTML结构：
<div class="grid-container-2">
<div class="content-box">使用网格线定义的区域</div>
</div>
grid-area的简写规则
当使用四值形式时，值的顺序严格按照行起始/列起始/行结束/列结束的顺序排列，如果某个方向的值使用auto，则会自动延伸到该方向的末尾。
/* 元素从第一行开始，第一列开始，延伸到最后一行，第二列结束 */
.auto-extend-box {
grid-area: 1 / 1 / auto / 2;
background-color: #ffcccb;
}
注意事项
- 使用grid-template-areas定义区域时，每一行的区域数量需要和grid-template-columns的列数一致，否则布局会失效
- 区域名称不能使用CSS的保留关键字，比如none、auto等
- 如果同时设置了grid-area的区域名称和网格线范围，网格线范围的优先级更高
- 网格区域的范围不能重叠，否则元素会按照层叠顺序显示，可能影响布局效果
grid-area属性不仅可以单独使用，还可以和grid-row、grid-column等属性配合，实现更灵活的网格布局调整，开发者可以根据实际布局需求选择合适的用法。