使用 grid-template-areas 可直观定义网格布局，通过命名区域构建页面结构。它以字符串形式在容器上创建二维模板，每行对应一个字符串，每个词代表一个区域，重复名称合并为矩形区域，句点表示空白，且每行单元格数需一致。结合 grid-area 将子元素分配至对应区域，实现无需行列计算的自动定位。适用于头部、侧边栏、主内容、页脚等语义清晰的整体框架设计，如经典两栏布局。支持用句点留空或在媒体查询中重定义区域顺序，实现响应式调整，例如移动端堆叠排列。该方法提升可读性与维护性，但需注意命名一致与结构对齐。
使用 grid-template-areas 可以直观地通过命名区域来定义 CSS Grid 布局，让页面结构更清晰易读。它适合构建整体页面框架，比如头部、侧边栏、主内容区和页脚。
基本语法与概念
grid-template-areas 在容器上定义一个二维网格模板，通过为每个网格区域命名，并用引号内的字符串排列这些名称来形成布局。
关键点：- 每个字符串代表一行，每个单词代表一个单元格的区域名称
- 重复的名称会合并成一个矩形区域
- 用句点（.）表示空白单元格
- 所有行的单元格数量必须一致
示例：
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
这会创建三行两列的布局，header 横跨两列，footer 同样，sidebar 和 main 并排在中间行。
立即学习“前端免费学习笔记（深入）”；
给项目分配区域
使用 grid-area 属性将子元素与定义的区域名称对应。
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
这样每个元素就会自动放入指定位置，无需再写行列定位。
实用布局示例：经典两栏布局
常见于后台或博客页面。
.layout {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-areas:
"head head"
"side main"
"foot foot";
height: 100vh;
}
.header { grid-area: head; background: #333; color: white; }
.sidebar { grid-area: side; background: #f4f4f4; }
.main { grid-area: main; padding: 20px; }
.footer { grid-area: foot; background: #333; color: white; }
这个结构清晰表达了各部分的位置关系，易于维护和调整。
灵活处理空区域与响应式变化
可以用句点跳过某些格子，也可以在不同屏幕下重新定义区域排列。
例如移动端堆叠布局：
@media (max-width: 600px) {
.container {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
}
此时侧边栏移到主内容下方，适应小屏显示。
基本上就这些。grid-template-areas 让布局像画草图一样直观，特别适合语义明确的页面结构设计。不复杂但容易忽略细节对齐和命名一致性。
