使用 grid-template-areas 可定义直观的网格布局：通过命名区域将页面划分为头部、侧边栏、主内容和底部，配合 grid-area 指定元素位置，实现清晰、易调整的响应式结构。
使用 grid-template-areas 可以通过直观的视觉方式定义网格区域，让布局更清晰易读。下面是一个典型的示例，展示如何用它构建一个简单的网页布局：包含头部、侧边栏、主内容区和底部。
HTML 结构
<div class="container"><header>Header</header>
<aside>Sidebar</aside>
<main>Main Content</main>
<footer>Footer</footer>
</div>
CSS 样式
通过 grid-template-areas 将不同元素分配到命名区域：
.container {display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: 60px 1fr 50px;
height: 100vh;
}
header {
grid-area: header;
background-color: #4CAF50;
}
aside {
grid-area: sidebar;
background-color: #FFC107;
}
main {
grid-area: main;
background-color: #E3F2FD;
}
footer {
grid-area: footer;
background-color: #9E9E9E;
}
说明与要点
上面代码中，grid-template-areas 定义了一个三行两列的布局：
- 第一行：“header header” 表示头部横跨两列
- 第二行：“sidebar main” 左边是侧边栏，右边是主内容
- 第三行：“footer footer” 底部也横跨整页
- 每个区域名称必须对应一个设置了 grid-area 的子元素
- 用点（.）可以表示空单元格，比如 "header header" 和 ". main" 中的 . 代表留空
实际应用场景
这种写法特别适合固定结构的页面布局，如仪表盘、管理后台或文章页。你可以轻松调整区域位置，比如把侧边栏移到右边：
立即学习“前端免费学习笔记（深入）”；
grid-template-areas:"header header"
"main sidebar"
"footer footer";
只需交换 main 和 sidebar 的位置，布局即刻改变，无需修改 HTML 结构。
基本上就这些，grid-template-areas 让网格布局像画草图一样简单。
