写错 grid-template-areas 字符串会导致整个布局退化为单列流，因浏览器静默丢弃整条声明；必须确保每行引号内单词数一致、仅用单个ASCII空格分隔、引号不可省略、区域名与grid-area值严格匹配（大小写敏感、不加引号）、且配套定义grid-template-columns和grid-template-rows。
写错 grid-template-areas 字符串，整个布局就退化为单列流——不是 bug，是浏览器直接丢弃整条声明，不报错也不提示。
grid-template-areas 字符串为什么一写就塌成单列
它对格式极其敏感，三处写错任一即失效：
- 每行引号内单词数不一致：三栏布局必须每行三个词，比如
"header header header"→"nav main aside"→"footer footer footer"；少一个或多一个，整条规则被静默忽略 - 单词间用了制表符、双空格或全角空格：只允许单个 ASCII 空格，编辑器自动换行可能插入隐形换行符，建议写成单行
- 漏写引号：
grid-template-areas: header header header是非法语法，浏览器跳过；必须是字符串字面量，即带双引号
区域名和 grid-area 必须严格匹配
区域名不是语义标签，而是纯字符串键值对，大小写敏感、不支持中文和特殊字符：
- 合法区域名：
main、left_sidebar（推荐下划线）、nav；非法：left-sidebar（连字符易与网格线混淆）、Main（大小写不一致）、主内容（中文） -
grid-area值不能加引号：grid-area: main;✅，grid-area: "main";❌ - 子元素没设
grid-area，就不会进对应区域——它会按 DOM 顺序从左上角开始填入，默认位置大概率错位；DevTools 的 computed 样式里若显示grid-area: auto，说明该元素未被识别为网格项
grid-template-columns 和 grid-template-rows 缺一不可
grid-template-areas 只定义“地图”，不定义“尺寸”。漏掉列或行定义，网格就只有骨架没有血肉：
立即学习“前端免费学习笔记（深入）”；
- 三栏必须配三列定义，例如：
grid-template-columns: 200px 1fr 200px;；只写grid-template-areas不写列，所有元素挤在第一列 - 主内容必须用
1fr，不能用auto——否则不会撑高容器，footer会上浮 - 全屏布局还需确保父容器有
min-height: 100vh，且body清除默认margin
响应式切换时必须同步更新 areas 和 columns
移动端不是只改列宽，区域映射也得重排，否则侧栏“消失”或错位：
- 桌面端：
grid-template-areas: "header header header" "nav main aside" "footer footer footer"; - 移动端需同时改两处：
grid-template-areas: "header" "main" "nav" "aside" "footer";+grid-template-columns: 1fr; - 即使某栏要隐藏（如右栏），也不能从字符串里删掉——删了，对应
grid-area: aside就断链，元素不参与布局
最常被忽略的是上下文丢失：父容器没设 display: grid，或被 float、position: absolute 干扰，又或者用了 display: contents，都会让 grid-area 完全失效。调试时先看 computed 样式里 grid-area 是否为 auto，再查父级 display 值。
