使用grid-template-areas可直观定义页面布局，通过命名区域并用模板字符串排列，实现主内容与侧边栏等结构；1. 在容器中用grid-template-areas设置区域布局，如"header header""sidebar main""footer footer"，配合行列尺寸定义；2. 子元素通过grid-area分配至对应区域；3. 响应式下可重排区域顺序，如移动端将侧边栏移至主内容后，提升可读性。命名清晰时，布局结构一目了然，修改方便。
使用CSS Grid中的grid-template-areas可以直观地定义页面布局结构，特别适合实现主次内容区域（如主内容区和侧边栏）的排版。通过为不同区域命名，再在容器中用模板方式排列这些名称，代码更清晰易读。
1. 定义网格容器与区域名称
在父容器上启用Grid布局，并使用grid-template-areas指定布局结构。每一行用引号包裹，每个单词代表一个区域，相同的名称会合并成一个连续区域。
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
2. 为子元素分配区域
通过grid-area属性将子元素与grid-template-areas中定义的名称对应起来，从而定位到指定位置。
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
3. 实现响应式主次布局
在小屏幕上可调整区域排列，比如让侧边栏位于主内容下方，提升移动端体验。
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
}
这种方式让布局意图一目了然，修改结构只需调整字符串模板，无需重新计算行列尺寸。适合构建包含头部、导航、主内容、侧边栏和页脚的典型网页布局。
基本上就这些。只要命名清晰，结构对齐，grid-template-areas能让复杂布局变得简单直观。
