使用 grid-template-areas 和 grid-area 可通过命名区域直观构建布局。1. 在容器中用 grid-template-areas 定义行结构，如 "header header" "sidebar main" "footer footer"；2. 设置 grid-template-rows 和 grid-template-columns 确定行列尺寸；3. 子元素通过 grid-area 指定对应区域名称，如 header、sidebar 等；4. 响应式调整时，在媒体查询中重定义 grid-template-areas，如小屏改为单列堆叠；5. 区域名需完全匹配，空缺用点（.）表示。该方法提升布局可读性与维护性。
使用 grid-template-areas 和 grid-area 可以直观地通过命名区域来构建页面布局，特别适合快速搭建结构清晰的组件。这种方式让布局更易读、易维护。
定义 grid-template-areas 搭建整体结构
在容器上使用 grid-template-areas，通过字符串定义每一行的区域名称，每个名称对应一个子元素的命名区域。
例如，创建一个典型的页面布局：.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-rows: 60px 1fr 40px;
grid-template-columns: 200px 1fr;
height: 100vh;
}
上面代码中：
- "header header" 表示头部占据两列
- "sidebar main" 表示侧边栏和主内容区并排
- 每行字符串对应网格的一行
用 grid-area 分配组件位置
在子元素上使用 grid-area 属性，将其与模板中的名称对应，即可自动归位。
继续上面的例子：.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
这样每个组件就按你“画”出的结构排列好了，不需要关心行号或列号。
灵活调整区域实现响应式
可以通过媒体查询重新定义 grid-template-areas 来适配不同屏幕。
立即学习“前端免费学习笔记（深入）”；
比如在小屏下堆叠布局：@media (max-width: 600px) {
.container {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
}
只需改变字符串结构，组件会自动重排，无需修改 HTML 结构。
基本上就这些。用名字“画”出布局，再把组件对号入座，清晰又高效。不复杂但容易忽略的是：区域名称必须与 grid-area 完全匹配，且每个字符串代表一行，空缺可用点（.）表示。
