grid-template-areas通过命名区域直观定义网格布局，配合display: grid和grid-area实现元素定位，支持空单元格与响应式调整，使页面结构更易读和维护。
CSS 的 grid-template-areas 是一种直观且强大的布局方式，特别适合构建页面的整体结构。它允许你通过命名区域来可视化地定义网格布局，让代码更易读、维护更方便。
理解 grid-template-areas 的基本语法
grid-template-areas 需要配合 display: grid 使用，通过在容器中定义一个字符串网格来映射命名区域。
示例：
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
这段代码创建了一个三行三列的布局：
- header 占据第一行全部三列
- sidebar 在第二行第一列
- main 在第二行后两列
- footer 占据第三行全部三列
为区域分配实际元素
使用 grid-area 属性将具体元素与模板中的名称对应起来。
立即学习“前端免费学习笔记（深入）”；
HTML 示例：
<div class="container"> <header>Header</header> <aside>Sidebar</aside> <main>Main Content</main> <footer>Footer</footer> </div>
CSS 中指定每个元素对应的区域：
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }
这样，每个元素就会自动放入你在 grid-template-areas 中定义的位置。
灵活调整布局结构
你可以轻松修改布局结构，比如让侧边栏跨两行：
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"sidebar footer";
}
此时 sidebar 从上到下占据两行，footer 只占底部右侧。
用点号（.）表示空单元格：
grid-template-areas: "header header" ". main" "footer footer";第一个位置留空，不放置任何内容。
响应式布局中的应用
结合媒体查询，可以为不同屏幕尺寸切换布局结构。
@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}
移动端时，所有区域垂直堆叠，提升可读性。
基本上就这些。用 grid-template-areas 布局就像画草图一样直观，特别适合页头、侧边栏、主内容、页脚这类常见结构，写起来清晰，改起来也快。
