全屏圣杯布局需同时满足“网格上下文成立”和“区域映射完整”：父容器必须设display: grid且min-height: 100vh，body需重置margin: 0; min-height: 100vh；grid-template-areas每行单词数一致、仅含ascii字母数字连字符、大小写敏感；所有子元素须显式声明匹配的grid-area，否则退化为单列流。
全屏圣杯布局在 CSS Grid 中能稳定实现，但必须同时满足「网格上下文成立」和「区域映射完整」两个前提，缺一不可。只写 grid-template-areas 不设 display: grid，或漏掉某个 grid-area，页面就会退化成单列流——不报错，但视觉上“突然塌了”。
grid-template-areas 字符串怎么写才不被忽略
浏览器对 grid-template-areas 的解析非常严格，三处细节错一个，整条声明就失效：
- 每行引号内单词数必须一致：三栏布局就每行三个词，如
"header header header"、"nav main aside"、"footer footer footer"；写成"header header"+"nav main aside"会直接退化 - 区域名只能含 ASCII 字母、数字、连字符，不能有空格、点、下划线或 Unicode 字符；
sidebar和Sidebar是不同区域，大小写敏感 - 字符串中没出现的区域名，对应元素会被完全忽略——比如写了
grid-area: sidebar，但字符串里是"nav main aside"，那个元素就“消失”了，不是隐藏，是不参与网格布局
为什么设置了 grid-area 却没进对应位置
最常见原因是网格上下文丢失，而非样式写错：
- 父容器没设
display: grid（或被float、position: absolute覆盖） - 用了
display: contents：它会让父容器“消失”，子元素直接受上级网格约束，此时在它身上写的grid-area失效 - 元素本身没加
grid-area：Grid 会按 DOM 顺序自动填入，破坏区域映射 - 调试时看开发者工具 computed 样式，若
grid-area显示为auto，说明该元素未被识别为网格项
如何让布局真正撑满整个视口高度
仅给容器设 height: 100vh 不够，body 默认有 margin 且高度不继承：
- 必须重置
body { margin: 0; min-height: 100vh; } - 网格容器自身也要设
min-height: 100vh（不是height，避免内容超长时被截断） -
grid-template-rows必须显式定义中间行占满剩余空间，例如grid-template-rows: 60px 1fr 40px；只靠grid-template-areas不定义尺寸，footer 就会上浮 - 侧栏和 main 高度同步靠
1fr行高保证，不是靠height: 100%——后者在 Grid 里无效
响应式切换时侧边栏“不见了”怎么办
移动端收起侧边栏，不是删 HTML 元素，而是改区域定义并同步动作：
- 桌面端：
grid-template-areas: "header header header" "nav main aside" "footer footer footer" - 移动端：改成
grid-template-areas: "header header header" "main main main" "footer footer footer"，同时确保.nav和.aside仍保留grid-area: nav/grid-area: aside，只是它们不再出现在字符串中——这样元素还在 DOM 里，只是不被分配位置，自然隐藏 - 如果删了元素却没改字符串，或改了字符串却没同步
grid-area值，区域名对不上，元素就会被塞进第一格，破坏结构
最容易被忽略的是：grid-template-areas 只管“语义位置”，不管“尺寸”和“上下文”。哪怕字符串写得完全正确，只要父容器没开 Grid、没设行列尺寸、或 body 没撑满视口，整个布局就立刻失效——而且没有任何错误提示，只能靠 computed 样式逐层排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
