如何用css grid-template-areas快速制作页眉页脚

使用 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 结构：

然后在 CSS 中使用 grid-template-areas 定义这三个区域的排布方式。

2. 使用 grid-template-areas 定义区域

给每个区域命名，并用字符串排列它们的位置：

立即学习“前端免费学习笔记（深入）”；

上面的布局是垂直堆叠：页眉在上，内容居中，页脚在底部。因为只有一列，每行一个区域，写起来非常简洁。

3. 添加侧边栏（可选扩展）

如果以后想加侧边栏也不难。修改 grid-template-areas 即可：

Chromox

Chromox是一款领先的AI在线生成平台，专为喜欢AI生成技术的爱好者制作的多种图像、视频生成方式的内容型工具平台。

184

查看详情

这样就能轻松扩展成更复杂的布局，而原始结构依然清晰。

4. 高度自适应与页脚置底

为了让页脚始终在视口底部（即使内容很少），可以结合 min-height 和 1fr 技巧：

这表示：

• 第一行（页眉）高度由内容决定
• 第二行（内容）占据剩余空间
• 第三行（页脚）也由内容决定

当内容不足时，中间区域撑开空白，页脚自然落在最下面。

基本上就这些。用 grid-template-areas 做页眉页脚布局，语义清晰、维护方便，特别适合现代网页开发。不复杂但容易忽略细节，比如命名一致性和容器显示模式。

以上就是如何用css grid-template-areas快速制作页眉页脚的详细内容，更多请关注php中文网其它相关文章！