结论：用height: 100vh搭配grid-template-areas能可靠实现全屏响应式单页布局，但必须同时满足html/body{margin:0;padding:0;height:100%}、容器设min-height:100vh、所有子项显式声明严格匹配的grid-area。
直接说结论：用 height: 100vh 搭配 grid-template-areas 能可靠实现全屏响应式单页布局，但必须同时满足三个硬性条件：html 和 body 清除默认 margin/padding、容器设 min-height: 100vh（非 height: 100vh）、所有区域项显式声明 grid-area 且名字严格匹配。
为什么 height: 100vh 在 Grid 里经常“不够高”
100vh 是按当前可视区域计算的，不是设备屏幕物理高度。iOS Safari 在地址栏展开/收起时会动态改变可视区域，但 CSS 不重算；更常见的是 html/body 默认有 margin 或未设 height: 100%，导致 Grid 容器继承不到完整高度。现象是：底部留白、滚动条意外出现、1fr 区域只占一小截。
- 必须写
html, body { margin: 0; padding: 0; height: 100%; } - Grid 容器推荐用
min-height: 100vh，避免内容超长时被裁剪 - 禁用
overflow: hidden——它会掩盖因盒模型错误导致的溢出问题
grid-template-areas 必须重写，不能只调尺寸
响应式不是靠缩放或微调 grid-column 实现的，而是靠在媒体查询中整块重定义 grid-template-areas。移动端要把侧边栏从右侧“移到主内容下方”，只改列宽或位置会错位；必须让结构语义对齐视觉意图。
- 桌面端：
grid-template-areas: "header header" "sidebar main" "footer footer"; - 移动端（≤768px）：
grid-template-areas: "header" "main" "sidebar" "footer"; - 每个区域名大小写敏感，子元素必须写
grid-area: sidebar（无引号）
背景图与内容分离时，伪元素比直接设 background-image 更稳
把背景图直接写在网格项上，会导致文字和背景耦合过紧：缩放失真、居中偏移、模糊滤镜失效。尤其当区域高度为 auto 时，背景可能完全不渲染。
- 给网格项加
position: relative - 用
&::before { content: ""; position: absolute; inset: 0; background: url(...) center/cover; z-index: -1; } - 避免用
background-attachment: fixed——在 Grid 容器中 Safari 表现极不稳定
真正卡住人的从来不是语法，而是 html/body 的 margin 是否清干净、容器是否真的占满视口、以及响应式断点里有没有整块重写 grid-template-areas。这三个点漏掉任意一个，布局就会在某个设备上突然“塌方”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
