使用 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 划分仪表盘，逻辑清晰，修改方便，适合大多数管理后台或数据可视化界面。不复杂但容易忽略细节，比如区域名称拼写一致性和空单元格处理（可用点“.”表示空白格）。