100vh 在移动端常“不够高”是因为 safari 地址栏动态遮盖视口，导致 100vh 取初始高度而滚动后错位；应改用 min-height: 100dvh，并确保 html/body 显式设高，grid 才能正确布局。
为什么 100vh 在移动端经常“不够高”？
因为 Safari（尤其是 iOS）的地址栏和底部工具栏会动态遮盖/释放视口高度，100vh 取的是初始布局时的视口高度，滚动后可能被截断或留白。这不是 Grid 的问题，而是 vh 单位本身的局限。
- 实际场景：全屏轮播、登录页、单页应用根容器
- 真实表现：iOS 上滚动后底部空白、内容被切掉、按钮点不中
- 替代方案不是换单位，而是用
min-height: 100dvh（推荐）或height: 100svh -
dvh= dynamic viewport height，浏览器会随地址栏显隐实时更新，目前 Chrome 105+、Safari 16.4+、Firefox 114+ 支持；svh是 small viewport height，取“最小可能视口”，更保守但兼容略差
Grid 全屏布局必须设 html 和 body 高度吗？
必须。Grid 容器的高度依赖父级约束，而默认 html 和 body 没有显式高度，100vh 或 100dvh 就没意义。
- 错误写法：
main { display: grid; height: 100vh; }—— 如果body没撑开，main高度就是 0 - 正确顺序：
html, body { margin: 0; height: 100%; } body { display: grid; min-height: 100dvh; } - 不要用
height: 100dvh直接设在body上（部分旧版 Safari 不认），优先用min-height - 若项目需支持 iOS 15.4 以下，可降级为 JS 动态设置：
document.body.style.height = <code>${window.innerHeight}px，但仅作兜底
grid-template-rows: 1fr 和 100% 有什么区别？
1fr 是 Grid 的弹性分配单元，基于可用空间计算；100% 是相对父元素高度的百分比，父元素若无高度则无效。
- 常见坑：
grid-template-rows: 100%在全屏布局里基本没用，因为父容器高度来自min-height: 100dvh，而百分比高度只对height生效，不对min-height生效 - 正确组合：
grid-template-rows: 1fr+min-height: 100dvh，让 Grid 自动填满剩余空间 - 多区域场景示例：
grid-template-rows: auto 1fr auto—— 头部自适应、主体占满剩余、底部自适应，这才是 Grid 的优势所在
键盘弹出时 iOS 页面被顶起，怎么防止 Grid 布局错乱？
这不是 Grid 的 bug，是 iOS Webkit 的输入框聚焦行为触发了视口缩放与重排。Grid 容器本身不会“错乱”，但子元素可能因视口突变而位置偏移或溢出。
立即学习“前端免费学习笔记（深入）”；
- 关键动作：监听
focusin和blur，临时给body加position: fixed（慎用）或用scrollIntoView({ block: 'nearest' })控制焦点位置 - 更稳妥做法：避免让输入框位于视口底部；用
viewportmeta 的height=device-height无济于事，已被现代 Safari 忽略 - 真实兼容建议：对
input和textarea添加scroll-margin-top: 60px，确保聚焦时内容不被键盘盖住
有些细节没法靠一个 CSS 属性解决，比如 dvh 的渐进支持、iOS 键盘和视口的博弈、Grid 子项的内在尺寸继承逻辑——这些地方一旦漏掉，调试起来反而比 Flex 慢。
