grid-template-areas仅定义区域地图，元素定位依赖子元素的grid-area属性，二者名称须字面完全一致；格式错误（如引号缺失、列数不等、非法字符）将导致整条声明静默失效。
直接说结论：grid-template-areas 本身不布局，它只画一张“地图”；真正让元素落位的，是每个子元素上必须写的 grid-area ——二者缺一不可，且名称必须字面完全一致。
grid-template-areas 字符串怎么写才不被浏览器忽略
浏览器对这个属性极其敏感，格式错一点就整条声明静默失效（DevTools 里会显示为划掉的灰色）。
- 每行必须用英文引号包裹，比如
"header header"，不能漏引号、也不能用中文引号或单双混用 - 所有行的单词数量必须严格相等：如果第一行是
"header header header"（3 列），第二行也得是 3 个词，比如"nav main aside"，写成"nav main"就直接失效 - 空白单元格只能用英文点号
.占位，不能留空、不能用空格代替、不能写"" - 区域名只能含字母、数字、短横线
-或下划线_，不能以数字开头，不能含空格或中文标点；main-content✅，main content❌，1sidebar❌
grid-area 怎么配对才能生效
grid-area 不是类名，也不是选择器，它就是一个纯字符串匹配动作——和 grid-template-areas 里出现的每一个词逐字比对。
- 大小写敏感：
grid-area: Header和"header header"不匹配 - 不能加引号：
grid-area: "header"是非法写法，必须写成grid-area: header - 必须是直系子元素：如果
.sidebar套在一层<div class="wrapper"> 里，那它就不是网格容器的直接子项，<code>grid-area: sidebar无效 - 值必须出现在
grid-template-areas的某一行中，哪怕只出现一次；写了个grid-area: banner，但模板里没"banner"，这个元素就会被挤到网格左上角默认位置 - 移动端改成竖排
"header" "nav" "main" "aside" "footer"，每行 1 列，那你原来写在.nav上的grid-area: nav依然有效——因为nav这个词还在新地图里 - 但如果把
nav和aside合并成sidebar，那对应元素的grid-area就必须同步改成sidebar，否则它会“失联” - 不能只在媒体查询里改某一行，比如只改第三行；CSS 不支持局部更新，必须重写整个
grid-template-areas值 - 别指望用 CSS 自定义属性（
--area-main）来动态替换区域名：grid-area: var(--area-main)不被支持 - 默认所有行按内容自适应高度，如果
footer区域里只有文字，又没设min-height，它就只会那么高 - 想让它贴底，得配合
grid-template-rows：比如grid-template-rows: auto 1fr auto，让中间的main行占满剩余空间，footer 自然被推到底部 - 也可以用
grid-row: 3 / -1让 footer 从第 3 行开始，一直延伸到最后一行（前提是知道总行数） - 千万别同时写
grid-area: footer和grid-row: 1 / 2，后者会覆盖前者，命名区域绑定失效
响应式切换时为什么区域突然错乱
媒体查询里改 grid-template-areas，只是重绘了地图；但子元素的 grid-area 还指着旧名字，新地图里可能已经没有那个区域了。
footer 贴底失败、高度异常的常见原因
grid-template-areas 只定义区域位置，不控制行高。footer 看起来悬空，往往是因为它所在的那行高度没撑开。
最常被忽略的一点：JS 动态插入的新元素，即使结构正确，也必须手动加上 grid-area 才能进区域——CSS 不会自动扫描 DOM 变化去补绑定。
