grid-template-areas 用语义化名称定义网格区域，通过字符串“视觉草图”直观布局，配合 grid-area 快速分配元素，支持响应式一键切换结构，需注意行列数一致、用点号占位、名称严格匹配。
Grid网格布局用 grid-template-areas 可以直观地把页面划分成语义化区域，让复杂结构一目了然，不用嵌套多层容器或反复计算行列位置。
用名字定义区块，布局像写草图一样简单
你只需给每个网格单元起个有意义的名字（比如 "header"、"sidebar"），再用字符串拼成“视觉草图”，Grid 就自动按行分配区域：
display: grid; grid-template-areas: "header header header" "sidebar main main" "footer footer footer";每一行字符串对应一行网格，空格分隔列，相同名字的单元格自动合并为一个连续区域。
配合 grid-area 给元素精准“认领”位置
子元素只需设置 grid-area: header;，就直接落入对应区域——无需记行列线编号，也不用写 grid-row / grid-column：
-
<header></header>加grid-area: header;→ 填满第一行三列 -
<aside></aside>加grid-area: sidebar;→ 落在第二行第一列 -
<main></main>加grid-area: main;→ 占据第二行后两列
响应式切换只要改一行字符串
不同屏幕下重排结构？不用重写整个 Grid 规则，只替换 grid-template-areas 的字符串即可：
- 桌面端：竖排侧边栏 →
"header header" "sidebar main" "footer footer" - 移动端：侧边栏移到底部 →
"header header" "main main" "sidebar sidebar" "footer footer"
名字不变，逻辑不变，只是“草图”变了，维护成本大幅降低。
注意事项：名字必须严格匹配，点号代表空单元格
grid-template-areas 对格式敏感：
- 所有行字符串列数必须一致，缺位用
.（英文句点）占位 - 名字区分大小写，且不能含空格或特殊字符
- 未被任何元素声明的区域会留空；多个同名区域会各自独立存在（不自动合并）
比如："header . aside" "main main main" 表示第一行中间留空，右侧是 aside 区域。
基本上就这些。用好 grid-template-areas，复杂布局就变成填字游戏——画好格子，贴上标签，各就各位。