在网页前端开发中，页眉和页脚属于页面的基础结构模块，几乎所有常规页面都需要实现这两个区域的稳定布局。css的grid-template-areas属性是网格布局体系中非常实用的功能，它允许开发者通过给网格区域命名的方式，直观定义页面不同模块的位置，相比传统的浮动、定位布局方式，能大幅减少代码量，提升布局效率。
grid-template-areas基础概念
grid-template-areas是CSS Grid布局的属性，用于定义网格容器的区域划分，每个区域对应一个命名的网格区域。使用该属性前需要先通过display: grid将容器设置为网格布局，同时可以通过grid-template-columns和grid-template-rows定义网格的列宽和行高。
区域命名的规则是用字符串表示每一行的区域划分，相同名称的单元格会被合并为一个区域，字符串中的点.表示空的网格单元格。例如下面的代码就定义了一个三行三列的网格，其中header区域占满第一行，main区域占第二行前两列，sidebar占第二行第三列，footer占满第三行：
.container {
display: grid;
grid-template-columns: 1fr 1fr 200px;
grid-template-rows: 80px 1fr 60px;
grid-template-areas:
"header header header"
"main main sidebar"
"footer footer footer";
}
用grid-template-areas实现页眉页脚布局的完整步骤
1. 搭建基础HTML结构
首先创建包含页眉、主体内容、页脚的基础HTML结构，给每个模块添加对应的类名，方便后续CSS关联：
<div class="page-container">
<header class="page-header">这是页眉区域</header>
<main class="page-main">这是主体内容区域</main>
<footer class="page-footer">这是页脚区域</footer>
</div>
2. 定义网格容器与区域划分
给外层容器设置网格布局，通过grid-template-areas定义页眉、主体、页脚的区域位置，同时设置合适的行高，让页眉和页脚高度固定，主体内容区域自适应剩余高度：
.page-container {
display: grid;
/* 三行：页眉80px，主体自适应，页脚60px */
grid-template-rows: 80px 1fr 60px;
/* 一列占满整个宽度 */
grid-template-columns: 1fr;
/* 定义区域：第一行是header，第二行是main，第三行是footer */
grid-template-areas:
"header"
"main"
"footer";
/* 设置容器最小高度为视口高度，让页脚始终在页面底部 */
min-height: 100vh;
}
3. 关联子元素与网格区域
通过grid-area属性将每个子元素对应到之前定义的网格区域名称上，这样元素就会自动放置到对应的位置：
.page-header {
grid-area: header;
background-color: #f0f0f0;
display: flex;
align-items: center;
padding: 0 20px;
}
.page-main {
grid-area: main;
padding: 20px;
background-color: #ffffff;
}
.page-footer {
grid-area: footer;
background-color: #333333;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
4. 完整运行效果
将上述代码组合后，就能得到一个页眉固定在顶部、页脚固定在底部、主体内容自适应高度的页面布局，即使主体内容较少，页脚也会始终处于视口底部，不会出现悬空的情况。完整的可运行代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid-template-areas页眉页脚布局示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page-container {
display: grid;
grid-template-rows: 80px 1fr 60px;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"footer";
min-height: 100vh;
}
.page-header {
grid-area: header;
background-color: #f0f0f0;
display: flex;
align-items: center;
padding: 0 20px;
font-size: 20px;
font-weight: bold;
}
.page-main {
grid-area: main;
padding: 20px;
background-color: #ffffff;
line-height: 1.6;
}
.page-footer {
grid-area: footer;
background-color: #333333;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="page-container">
<header class="page-header">网站页眉</header>
<main class="page-main">
<h2>主体内容区域</h2>
<p>这里是页面的主要内容部分，内容高度可以自适应变化，页脚会始终保持在页面底部。</p>
<p>当内容较少时，容器的最小高度为100vh，页脚不会向上移动。</p>
</main>
<footer class="page-footer">© 版权所有 网站页脚</footer>
</div>
</body>
</html>
布局注意事项
- grid-template-areas中每一行的字符串长度必须一致，否则会导致布局解析错误，比如第一行定义了3个区域，第二行也必须定义3个区域，空区域用点
.表示。 - 如果页面需要侧边栏结构，可以调整grid-template-columns为多列，同时修改grid-template-areas的区域划分，比如
"header header" "sidebar main" "footer footer"就能实现带侧边栏的布局。 - 网格区域的命名不能使用CSS的保留关键字，建议使用语义化的名称，比如header、main、footer、sidebar等，提升代码可读性。
- 如果需要兼容旧版本浏览器，需要确认目标浏览器是否支持CSS Grid布局，目前主流现代浏览器都已经完整支持该属性。
小结
通过grid-template-areas实现页眉页脚布局，核心思路是先划分网格区域，再将对应元素关联到区域名称，整个过程不需要复杂的定位计算，代码直观易维护。相比传统的flex布局或浮动布局，这种方式在处理多区域页面结构时优势更明显，能大幅降低布局代码的复杂度，适合快速搭建标准化的页面结构。
css_gridgrid-template-areas页眉页脚布局网格布局修改时间：2026-07-06 16:36:40