使用 grid-template-areas 可直观创建仪表盘布局，通过命名区域定义容器结构，子元素用 grid-area 匹配位置，结合媒体查询实现响应式，提升可读性与维护性。
使用 HTML5 和 CSS Grid 布局创建仪表盘界面时，grid-template-areas 是一种非常直观且可读性强的方法。它允许你通过命名区域的方式，像画布一样规划页面结构，特别适合构建复杂的仪表盘布局。
定义网格容器与模板区域
要使用网格模板区域，首先在容器上启用 grid 布局，并用 grid-template-areas 定义布局结构。每个字符串代表一行，每个单词代表一个命名区域。
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main chart"
"sidebar main stats"
"footer footer footer";
grid-template-rows: 80px 1fr 1fr 60px;
grid-template-columns: 200px 1fr 300px;
height: 100vh;
gap: 10px;
padding: 10px;
}
上述代码将页面划分为头部、侧边栏、主内容区、图表区、统计区和页脚。区域名称需与对应元素的 grid-area 匹配。
为子元素分配区域
每个子元素通过 grid-area 属性指定其所属区域名称：
立即学习“前端免费学习笔记（深入）”；
.header { grid-area: header; background: #4a90e2; }
.sidebar { grid-area: sidebar; background: #d3d3d3; }
.main { grid-area: main; background: #f0f0f0; }
.chart { grid-area: chart; background: #7ed321; }
.stats { grid-area: stats; background: #f5a623; }
.footer { grid-area: footer; background: #9b9b9b; }
这样，各模块会自动落入指定位置，无需关心行列索引，结构清晰易维护。
响应式适配建议
在小屏幕上可以重新定义 grid-template-areas，让布局更紧凑：
@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"main"
"chart"
"stats"
"sidebar"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
这种方式能快速调整模块顺序和排列方向，实现移动端友好布局。
基本上就这些。用 grid-template-areas 划分仪表盘，逻辑清晰，修改方便，适合大多数管理后台或数据可视化界面。不复杂但容易忽略细节，比如区域名称拼写一致性和空单元格处理（可用点“.”表示空白格）。
