grid-template-areas通过命名区域定义网格布局，提升代码可读性。1. 基本语法：容器用字符串排列区域名，子元素用grid-area指定名称，相同名称自动跨格。2. 跨行列控制：重复区域名实现合并，用“.”表示空白单元格。3. 响应式调整：媒体查询中重定义区域排列，适配不同屏幕。4. 注意事项：每行区域数需一致，形状须为矩形，命名语义化且避免特殊字符。合理使用可清晰构建页面结构，适合头-侧边栏-内容-尾等布局。
CSS 的 grid-template-areas 是一种直观且语义化的方式来定义网格布局的结构。它允许你通过命名区域，然后在模板中用这些名称排列布局，使代码更易读、更易于维护。
1. 定义 grid-template-areas 基本语法
使用 grid-template-areas 时，先为每个网格项设置一个名字（通过 grid-area 属性），然后在容器上用字符串定义这些名字的排列方式。
每个字符串代表一行，每行中的单词代表该行中的列区域。相同的名称会跨格合并。
示例：
.container { display: grid; grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }
这个布局创建了三行三列的结构，其中头部和底部横跨三列，侧边栏占一列，主内容区占两列。
立即学习“前端免费学习笔记（深入）”；
2. 控制区域的行列跨度
通过重复区域名，可以实现跨行或跨列的效果。
比如想让 main 区域占满右侧两列，就在两列位置都写上 “main”。
如果某个位置不需要区域，可以用点号 . 表示空白单元格：
grid-template-areas: "header header header" "sidebar main main" "sidebar . footer";
这表示第三行第二列为空白，不放置任何元素。
3. 响应式布局中的灵活调整
在不同屏幕尺寸下，可以通过媒体查询重新定义 grid-template-areas 来改变布局结构，而无需改动 HTML 结构。
例如移动端可以改为垂直堆叠：
@media (max-width: 600px) { .container { grid-template-areas: "header" "main" "sidebar" "footer"; } }
这样页面在小屏幕上会依次显示各个模块，提升可读性。
4. 注意事项与最佳实践
确保每一行的区域数量一致，否则会引发语法错误。
- 所有区域必须形成一个完整的矩形，不能是L形或断开的形状
- 命名应具有语义，如 “nav”, “aside”, “content” 等，便于理解
- 避免使用空格或特殊字符命名区域
- 确保每个 grid-area 名称在模板中有对应定义
基本上就这些。合理使用 grid-template-areas 能让你的布局更清晰，尤其适合构建页面级的整体结构，比如常见的“头-侧边栏-内容-尾”布局。不复杂但容易忽略细节，多试几次就能熟练掌握。