grid-template-areas 是最快布局路径，但引号错、漏点、列数不一致或区域名不匹配会导致整条规则失效并回退流式布局。
直接用 grid-template-areas 是最快路径，但写错一行引号或漏一个点（.），整个布局就退回流式——不是没生效，是 CSS 解析器直接丢弃整条规则。
grid-template-areas 每行必须用独立引号包裹
浏览器把每组双引号看作一行轨道定义，少一组，就等于少定义了一行，整条声明被标记为 invalid value，DevTools 里该属性会被划掉，元素全按默认流排列。
- 错误写法：
grid-template-areas: "header header" "nav main"; "footer footer"（第三行引号单独成行，实际被拆成两个无效声明） - 正确写法：三组独立双引号，哪怕某行全是空位也要补
.：grid-template-areas: "header header header" "nav main main" "footer footer footer" - 不能合并成一个长字符串：
"header header header nav main main footer footer footer"是非法值
区域名必须和 grid-area 值严格一致
这不是类名匹配，是纯字符串比对：大小写、空格、拼写差一位，元素就进不了区域，直接回退到左上角第一格。
-
grid-area: header;✅ 对应"header header"；grid-area: "Header";❌（引号本身非法）或grid-area: head;❌（名字不匹配） - 区域名只允许字母、数字、短横线，
main-content合法，main content和main_content都非法 - 子元素必须是网格容器的**直系子元素**；套了
.wrapper的.main不会响应grid-area: main
跨行跨列必须靠重复命名，空位必须用 .
grid-template-areas 不支持 span 语法，想让标题占两行三列，就得在模板里连续两行、每行三个相同名字；留空位置必须显式写 .，不能靠空格或省略。
立即学习“前端免费学习笔记（深入）”；
- 标题跨两行三列：
"title title title" "title title title" - 右侧边栏只占右上一格：
"nav main aside"，第二行对应位置不能空着，得写"nav main ."或"nav main sidebar" - 列数不一致会静默失效：桌面端每行 4 个词，移动端媒体查询里改成
"header" "nav"（每行 1 个词），整条规则被忽略
响应式切换时，各断点每行列数必须完全一致
改布局不能只动 grid-template-areas 字符串，还要确保所有用到的 grid-area 名字，在每个断点的模板里都存在，且每行空格分隔的词数相同——否则 Safari ≤15.4 可能跳过未声明的区域名，Chrome 也会静默降级。
- 桌面四列 → 移动端单列，不能删行，要压成每行 4 个词：
"header header header header"、"main main main main"、"footer footer footer footer" - 如果某断点不需要某个区域（如手机端隐藏广告），别删名字，改用
.占位，保持列数一致 - 负线号（如
-1）在 Safari iOS 16.4+ 才稳定，生产环境建议加@supports (grid-column: 0 / -1)包裹
真正卡住人的从来不是语法多难，而是编辑器不报错、控制台没提示、布局突然“消失”——它只是 quietly fallback 到普通流。盯住引号、点、空格、大小写这四个地方，90% 的问题当场就能定位。
