用 grid-template-areas 实现圣杯布局最稳，但必须同时写对三处：字符串结构（每行单词数一致、仅含ascii字母数字和连字符、大小写敏感、单空格分隔）、元素区域指派（grid-area 值须在字符串中显式出现且不加引号）、列宽定义（必须显式声明 grid-template-columns，如 200px 1fr 200px）；任一缺失将导致静默退化为单列流。
直接用 grid-template-areas 实现圣杯布局最稳，但必须同时写对三处：字符串结构、列宽定义、元素区域指派；漏掉任一环节，整个网格会静默退化为单列流，且不报错。
grid-template-areas 字符串为什么“突然失效”
整条声明被浏览器静默丢弃，页面塌成单列，不是因为拼错单词，而是违反了硬性规则：
- 每行引号内单词数必须一致——三栏就每行三个词，比如
"header header header"→"nav main aside"→"footer footer footer"；少一个或多个，整条声明作废 - 区域名只能含 ASCII 字母、数字、连字符，不能有空格、下划线、中文、点号；
main和Main是两个不同区域，大小写敏感 - 所有子元素的
grid-area值，必须在字符串中显式出现一次以上；写了grid-area: sidebar，但字符串里是"nav main aside"，该元素就“消失”（不渲染也不占位） - 单词间只允许单个空格，制表符、双空格、换行符都会中断解析；Firefox 尤其敏感，建议字符串写成单行
为什么设置了 grid-area 却没生效
90% 的问题出在上下文丢失，而不是 CSS 写错：
- 父容器没设
display: grid，或被float、position: absolute干扰，Grid 上下文直接中断 - 父级用了
display: contents，它会让容器“消失”，子元素直接受上级网格约束，此时在它身上写的grid-area失效 - 子元素根本没写
grid-area，浏览器按 DOM 顺序自动填入，默认从左上角开始，破坏区域映射；DevTools 里看 computed 样式，若grid-area显示为auto，说明未被识别为网格项 -
grid-area值带引号（如grid-area: "main"）是非法语法，CSS 解析失败，该属性被忽略
grid-template-columns 必须显式声明，否则无列结构
grid-template-areas 只管语义位置，不管尺寸；没定义列宽，三栏就全挤成一列：
- 三栏常用组合：
grid-template-columns: 200px 1fr 200px（左固定、中弹性、右固定） - 避免混用
%和fr，比如20% 1fr 20%中%相对容器宽，fr分剩余空间，结果不可预测 -
1fr不是百分比，而是“扣掉其他已定尺寸后，剩余空间等分一份”；若想防压缩溢出，改用minmax(0, 1fr) - 响应式切换时，不能只改
grid-template-columns，还必须同步重写grid-template-areas字符串结构；例如移动端改为单列，就得从"nav main aside"改成"main"，否则区域匹配断裂
响应式切换侧边栏时，“不见了”是因为没同步更新两处
移动端收起侧边栏，不是靠 display: none 隐藏，而是靠改字符串 + 列宽：
- 桌面端：
grid-template-areas: "header header header" "nav main aside" "footer footer footer"，配grid-template-columns: 200px 1fr 200px - 移动端：
grid-template-areas: "header" "main" "footer"，配grid-template-columns: 1fr；注意：删掉nav和aside区域名，对应元素仍保留grid-area: nav等值，下次切回才不会断链 - 关键遗漏点：很多人只改了
grid-template-areas，却忘了同步调整grid-template-columns；列宽没变，空白轨道还在，只是没分配内容 - 最容易被忽略的是：区域名写对了、
grid-area也设了，但忘了配grid-template-columns或grid-template-rows；grid-template-rows: auto 1fr auto才能保证 footer 贴底，否则可能上浮
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
