使用 grid-template-areas 可直观定义网页布局，通过命名网格区域实现清晰的结构设计。1. 设置 display: grid；2. 用字符串定义行与区域，如 "header header"；3. 子元素用 grid-area 指定对应名称；4. 支持空单元格（.）、矩形区域和响应式调整。示例中报表布局包含标题、筛选、图表、表格和备注，可垂直堆叠或改为侧边栏结构。配合媒体查询，在小屏下自动变为单列，提升可读性与维护性。
使用 grid-template-areas 可以非常直观地定义网页或报表的布局结构。它通过为网格区域命名，让布局像“画图”一样清晰易懂，特别适合实现复杂的报表界面。
基本语法与概念
grid-template-areas 是 CSS Grid 布局中的一个属性，允许你用字符串来定义网格容器中各个区域的位置。每个字符串代表一行，每个单词代表一个单元格区域名称。
使用步骤：
- 在容器上设置 display: grid
- 用 grid-template-areas 定义行和列的布局结构
- 用 grid-area 属性为子元素指定对应的区域名
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }
实现典型报表布局
报表通常包含标题、筛选区、数据表格、图表和页脚等部分。下面是一个实用的布局示例：
立即学习“前端免费学习笔记（深入）”；
.report-layout {
display: grid;
grid-template-areas:
"title title"
"filters filters"
"chart chart"
"table table"
"notes notes";
grid-template-columns: 1fr;
grid-template-rows: auto auto 300px 1fr auto;
gap: 15px;
padding: 20px;
}
.title { grid-area: title; font-size: 1.5em; font-weight: bold; }
.filters { grid-area: filters; }
.chart { grid-area: chart; background: #f9f9f9; border-radius: 8px; }
.table { grid-area: table; overflow: auto; }
.notes { grid-area: notes; font-size: 0.9em; color: #666; }
这个布局是垂直堆叠的，适合打印或长页面展示。如果需要左右结构（比如侧边栏+主内容），可以这样调整：
.grid-container {
display: grid;
grid-template-areas:
"title title"
"nav chart"
"nav table"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto auto 1fr auto;
gap: 12px;
}
使用技巧与注意事项
为了让 grid-template-areas 更好用，注意以下几点：
- 用点号（.）表示空单元格，避免某些区域跨行时出错
- 同一区域必须是矩形且连续，不能L形或断开
- 名称区分大小写，建议统一用小写
- 可重复区域名实现跨行/跨列，如 "sidebar sidebar"
- 配合媒体查询轻松实现响应式，修改 areas 结构即可
例如在小屏幕上改为单列：
@media (max-width: 768px) {
.report-layout {
grid-template-areas:
"title"
"filters"
"chart"
"table"
"notes";
grid-template-columns: 1fr;
}
}
基本上就这些。grid-template-areas 让布局意图一目了然，写报表这类结构化内容特别高效。 
