grid-template-areas 是 CSS Grid 中通过语义化字符串定义网格区域的布局方式，需每行词数一致、用点号占位空格，配合 grid-area 匹配元素，并同步设置行列尺寸。
grid-template-areas 是 CSS Grid 中最直观的布局方式——它用语义化名称和字符串“画格子”，让结构一目了然，像填字游戏一样把元素对号入座。
写对模板字符串：每行词数必须一致
这是硬性规则，错一个就整个声明失效，且浏览器不报错。
- ✅ 正确示例：
"header header""nav main""footer footer"（每行都是2个词） - ❌ 错误示例：
"header header""nav main aside"（第二行3个词，整条被忽略） - 空单元格用英文点号
.占位，比如"header . aside"表示第一行中间留空
给子元素精准“认领”区域
模板只画格子，真正把元素放进去靠的是 grid-area 值，必须严格匹配：
- HTML 中的
<header></header>对应 CSS 的grid-area: header;（不能加引号、不能大小写混用、不能有空格） - 多个同名区域（如
"main main"）只对应一个元素；未设grid-area的子元素会被丢进默认流，可能错位 - 调试时可看 DevTools 的 computed 样式，若
grid-area显示为auto，说明没被识别为网格项
配齐行列尺寸：模板不管宽高，只管位置
grid-template-areas 不定义任何尺寸，必须同步设置 grid-template-rows 和 grid-template-columns：
- 列数由每行单词数决定：模板是
"a b c"→ 需提供 3 个列值，如200px 1fr 150px - 行数由字符串行数决定：3 行模板 → 至少 3 个行值，如
80px 1fr 60px - 漏写某一行/列会导致区域塌陷或不可见；用
auto或minmax()也可以，但不能省略
响应式切换只需改一行字符串
结构变更完全在 CSS 层完成，HTML 保持干净：
- 桌面端侧边栏在左：
"header header""nav main""footer footer" - 移动端移到底部：
"header header""main main""nav nav""footer footer" - 注意：
grid-template-columns和grid-template-rows也要同步调整，否则空白区域还在
