grid-template-areas写错一行即全废：每行单词数必须一致、区域名大小写敏感且合法、子元素需显式设grid-area且值完全匹配，同时父容器必须设display: grid并配套grid-template-columns，否则整条规则静默失效退化为单列流。
grid-template-areas 写错一行就全废
浏览器对 grid-template-areas 的解析极其严格，写错一个空格、少一个单词、引号不闭合，整条声明直接被静默丢弃——不是“不生效”，是根本没进入 Grid 解析流程，页面退化成单列流，控制台零报错。
必须同时满足三件事：
- 每行引号内单词数一致：三栏就得每行三个词，比如
"header header header"→"left main right"→"footer footer footer"；若某行写成"left main"（缺一个），整条规则失效 - 区域名只能含 ASCII 字母、数字、连字符，大小写敏感：
main和Main是两个不同区域 - 子元素必须显式设
grid-area，且值完全匹配字符串里的词，不能带引号：grid-area: main;✅，grid-area: "main";❌（语法错误，属性被忽略）
父容器没设 display: grid 就等于没写
写了 grid-template-areas 却没给父容器加 display: grid，或者父容器被 float、position: absolute 干扰，Grid 上下文直接中断。此时所有子元素按普通文档流渲染，grid-area 属性在 computed 样式里显示为 auto。
常见干扰项：
立即学习“前端免费学习笔记（深入）”；
-
display: contents在父级上：容器“消失”，子元素脱离当前网格上下文，grid-area失效 - 父容器高度未定义，又没设
min-height：中间栏用1fr但无参照高度，可能塌缩 - 漏写
grid-template-columns：三栏布局必须配grid-template-columns: 200px 1fr 200px，否则即使grid-template-areas正确，也只有一列
响应式切换时侧边栏“失踪”不是 display: none 的问题
移动端收起侧边栏，不能只靠 display: none 隐藏。这样元素还在 DOM 里，grid-area 仍绑定着已不存在的区域名，下次切回桌面态时，因为区域结构没同步更新，元素直接“失踪”——不是隐藏，是映射断裂。
正确做法是媒体查询中同步改两处：
- 桌面态：
grid-template-areas: "header header header" "left main right" "footer footer footer"; - 移动端：
grid-template-areas: "header" "main" "footer";（删掉left和right） - 同时更新
grid-template-columns：从200px 1fr 200px改为1fr
Flex 实现时 main 必须写在 HTML 最前面
Flex 圣杯布局的语义基础是主内容优先，所以 <main> 必须出现在 HTML 源码最前。仅靠 order: -1 调视觉顺序，不改 DOM 顺序——这对 SEO、屏幕阅读器、Tab 焦点都至关重要。
关键细节：
-
.left { order: -1; flex: 0 0 200px; }，.main { order: 0; flex: 0 1 auto; }，.right { order: 1; flex: 0 0 200px; } - 别用
flex: 1给.main：它等价于flex: 1 1 0%，内容极少时可能压缩到 0，应设min-width: 0防溢出破坏布局 - 移动端适配别反复重置
order，改用flex-direction: column更稳，且避免 iOS Safari 卡顿
<main> 放在最前——视觉对了，语义错了，搜索引擎和辅助技术照样判低质。 
