使用 grid-template-areas 可直观命名网格区域构建清晰布局，适用于仪表盘等多区块页面。1. 语法要求每行用引号包围，相同名称合并区域，点表示空单元格；2. 结合媒体查询可实现响应式，如桌面三栏与移动端堆叠；3. 复杂布局如仪表盘可通过区域命名跨行列对齐模块；4. 注意每行区域数一致、避免“洞”、命名语义化，并可用边框调试。
使用 grid-template-areas 可以直观地通过命名区域来构建复杂网页布局，让结构更清晰、易维护。它适用于需要明确划分区块的页面，比如仪表盘、后台管理界面或多区域内容页。
1. 基本语法与命名规则
在 CSS Grid 布局中，grid-template-areas 允许你为网格单元格定义名称，形成可视化的布局草图。
例如：.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}- 每一行用引号包围，表示网格的一行
- 每个单词代表一个区域名称，相同名称合并成一个区域
- 用点（.）表示空单元格
2. 实现响应式多区域布局
结合媒体查询和区域重排，可以轻松实现不同屏幕下的布局变化。
示例：桌面端三栏，移动端堆叠.layout {
display: grid;
gap: 1rem;
}
<p>/<em> 桌面布局 </em>/
@media (min-width: 768px) {
.layout {
grid-template-areas:
"head head head"
"nav main aside"
"foot foot foot";
grid-template-columns: 200px 1fr 150px;
grid-template-rows: auto 1fr auto;
}
}</p><p>/<em> 移动端布局 </em>/
@media (max-width: 767px) {
.layout {
grid-template-areas:
"head"
"main"
"nav"
"aside"
"foot";
grid-template-columns: 1fr;
}
}</p><p>.header { grid-area: head; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: foot; }3. 复杂布局实战：仪表盘示例
适合包含多个功能模块的界面，如数据面板、图表、通知区等。
立即学习“前端免费学习笔记（深入）”；
.dashboard {
display: grid;
gap: 15px;
grid-template-areas:
"topbar topbar topbar"
"menu chart1 chart2"
"menu chart3 table"
"status status table";
grid-template-columns: 150px 1fr 1fr;
grid-template-rows: 60px 1fr 1fr 80px;
}
<p>.topbar { grid-area: topbar; background: #333; color: white; }
.menu { grid-area: menu; background: #f0f0f0; }
.chart1 { grid-area: chart1; background: #cce5ff; }
.chart2 { grid-area: chart2; background: #d4edda; }
.chart3 { grid-area: chart3; background: #fff3cd; }
.table { grid-area: table; background: #f8d7da; }
.status { grid-area: status; background: #d1ecf1; }- 通过重复名称跨行跨列，无需额外设置
grid-column或grid-row - 视觉上对齐模块，便于团队协作理解结构
4. 注意事项与技巧
虽然 grid-template-areas 直观，但也有一些限制和最佳实践。
- 每行引号内的区域数量必须一致，否则声明无效
- 不能有“洞”（除非用点占位），不规则形状需合理规划
- 命名应语义化，如
sidebar、main-content，避免a1、box2 - 调试时可临时添加边框：
* { border: 1px solid red; }查看区域分布
基本上就这些。只要结构清晰，grid-template-areas 能大幅简化复杂布局的编写和维护，特别适合模块化设计场景。
