使用 grid-template-areas 可直观定义页面布局。1. 建立包含 header、main、footer 的 HTML 结构；2. 在 CSS 中用字符串命名区域，实现垂直堆叠布局；3. 可通过修改 grid-template-areas 和 grid-template-columns 添加侧边栏；4. 设置 grid-template-rows: auto 1fr auto 配合 min-height: 100vh，使页脚始终置底。该方法语义清晰、易维护，适合现代网页开发，关键在于命名一致和正确设置 display: grid。
使用 grid-template-areas 可以非常直观地定义页面布局，尤其适合快速搭建包含页眉和页脚的结构。它通过命名网格区域，让你像画草图一样设计页面，代码清晰易读。
1. 基础布局结构
先写出基本的 HTML 结构：
<div class="container"><header>页眉</header>
<main>内容区</main>
<footer>页脚</footer>
</div>
然后在 CSS 中使用 grid-template-areas 定义这三个区域的排布方式。
2. 使用 grid-template-areas 定义区域
给每个区域命名，并用字符串排列它们的位置：
立即学习“前端免费学习笔记（深入）”；
.container {display: grid;
grid-template-areas:
"header"
"main"
"footer";
min-height: 100vh;
gap: 10px;
}
header {
grid-area: header;
background: #4CAF50;
}
main {
grid-area: main;
padding: 20px;
}
footer {
grid-area: footer;
background: #333;
color: white;
}
上面的布局是垂直堆叠：页眉在上，内容居中，页脚在底部。因为只有一列，每行一个区域，写起来非常简洁。
3. 添加侧边栏（可选扩展）
如果以后想加侧边栏也不难。修改 grid-template-areas 即可：
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
}
这样就能轻松扩展成更复杂的布局，而原始结构依然清晰。
4. 高度自适应与页脚置底
为了让页脚始终在视口底部（即使内容很少），可以结合 min-height 和 1fr 技巧：
min-height: 100vh;
grid-template-rows: auto 1fr auto;
}
这表示：
- 第一行（页眉）高度由内容决定
- 第二行（内容）占据剩余空间
- 第三行（页脚）也由内容决定
当内容不足时，中间区域撑开空白，页脚自然落在最下面。
基本上就这些。用 grid-template-areas 做页眉页脚布局，语义清晰、维护方便，特别适合现代网页开发。不复杂但容易忽略细节，比如命名一致性和容器显示模式。
