css Grid布局中的grid-template-areas属性，允许开发者通过可视化的字符串形式定义网格的区域划分，不需要逐个计算网格线位置，就能快速搭建出结构清晰的页面布局，非常适合实现页头、侧边栏、内容区、页脚这类经典布局结构。
grid-template-areas基础语法
grid-template-areas的值是由字符串组成的列表，每个字符串代表网格的一行，字符串中用空格分隔的标识符代表该行中的一个网格区域。基本使用示例如下：
.container {
display: grid;
/* 定义3列，每列宽度1fr */
grid-template-columns: 1fr 1fr 1fr;
/* 定义3行，每行高度100px */
grid-template-rows: 100px 100px 100px;
/* 定义网格区域，每行对应一个字符串 */
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
使用规则说明
- 区域名称由开发者自定义，只能是单个标识符，不能包含空格、特殊符号，建议语义化命名，比如header、sidebar等。
- 同一行内的区域名称用空格分隔，不同行的字符串按顺序对应网格的行。
- 如果某个单元格不需要归属到特定区域，可以用点号
.表示，点号之间可以有空格也可以没有。 - 同一个区域名称要占据连续的矩形区域，不能出现分散的同名区域，否则布局会失效。
配合使用的属性
要让grid-template-areas生效，还需要配合以下属性使用：
grid-template-columns：定义网格的列宽，列的数量要和每行中区域名称的数量一致。grid-template-rows：定义网格的行高，行的数量要和grid-template-areas中字符串的数量一致。grid-area：给子元素指定对应的区域名称，让子元素放置到对应的网格区域中。
完整使用案例
下面实现一个包含页头、侧边栏、内容区、页脚的经典布局，完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>grid-template-areas布局示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: grid;
/* 3列：侧边栏200px，内容区自适应，这里用1fr也可以，根据需求调整 */
grid-template-columns: 200px 1fr 1fr;
/* 3行：页头60px，内容区自适应，页脚60px */
grid-template-rows: 60px 1fr 60px;
/* 定义区域，第二行第一个是sidebar，后两个是content */
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
height: 100vh;
}
.header {
grid-area: header;
background-color: #f0f0f0;
display: flex;
align-items: center;
padding: 0 20px;
}
.sidebar {
grid-area: sidebar;
background-color: #e0e0e0;
padding: 20px;
}
.content {
grid-area: content;
background-color: #fafafa;
padding: 20px;
}
.footer {
grid-area: footer;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<div class="header">页头区域</div>
<div class="sidebar">侧边栏区域</div>
<div class="content">内容区域</div>
<div class="footer">页脚区域</div>
</div>
</body>
</html>
注意事项
如果修改了grid-template-columns或者grid-template-rows的数量，要同步调整grid-template-areas中每行的区域数量和行数，否则会出现布局错乱。另外，grid-template-areas定义的区域是隐式的，不需要提前声明，只要在子元素中用grid-area指定对应名称即可生效。
通过grid-template-areas实现布局，代码结构非常直观，即使后续调整布局结构，只需要修改字符串中的区域名称顺序，不需要调整子元素的位置属性，维护起来十分方便。
css_gridgrid-template-areas网格布局前端布局修改时间：2026-07-13 02:45:22