100vh全屏高度失效主因是父容器未透传高度、grid轨道计算失准及移动端地址栏抖动；应设height:100vh于grid容器本身，统一box-sizing:border-box，用gap替代margin，并优先采用100dvh或JS动态设置视口高度。
用 100vh 做全屏高度但内容被截断？先检查父容器是否“透传”高度
直接写 height: 100vh 很容易失效，因为 CSS 高度不自动继承 —— 如果父元素没显式设高，子元素的 100vh 会照常生效，但 grid 的行轨道计算可能因内容撑开或压缩而失准。
常见错误现象：display: grid 容器高度看起来是满屏，但九宫格里最后一行被切掉、或单元格高度不均。
- 确保根级容器（比如
或直接父元素）没有min-height/height冲突，且未设overflow: hidden - 给 grid 容器加
height: 100vh，不是给它的父容器加 - 如果用了 Flex 布局嵌套 grid，注意
flex-direction: column下子项默认不占满剩余空间，需加flex: 1
grid-template-rows: repeat(3, 1fr) 为什么有时等高失效？和 box-sizing 与边距有关
1fr 是按可用空间分配，不是按内容高度。一旦单元格内有 padding、border、margin，或者字体行高撑开内容，就可能破坏视觉等高。
使用场景：纯色块、图标+简短文字、无外部样式干扰的干净结构最稳；带标题/描述/按钮的卡片需额外约束。
立即学习“前端免费学习笔记（深入）”；
- 所有 grid 子项统一设
box-sizing: border-box，避免 padding/border 溢出轨道 - 禁用子项的
margin，改用gap控制间距（gap不参与 fr 分配） - 文字类内容加
line-height: 1和overflow: hidden，防文本换行拉高单元格
在 Safari 或旧版 Chrome 里 100vh 动态变化？移动端地址栏导致高度抖动
iOS Safari 和部分 Android 浏览器会在滚动时隐藏/显示地址栏，100vh 会随之缩放（比如从 667px 变成 700px），导致 grid 高度跳变、九宫格错位甚至空白条。
性能影响：频繁重排 grid 轨道，尤其含动画或 JS 监听 resize 时更明显。
- 临时解法：用
min-height: 100vh+max-height: 100vh锁定，但无法完全防抖 - 稳妥做法：改用 JS 获取初始视口高度并设为内联
style="height: XXXpx"，再监听orientationchange更新（不监听 scroll） - 兼容性取舍：若只支持 iOS 15+/Chrome 90+，可尝试
100dvh（dynamic viewport height），它能响应地址栏变化
九宫格要响应式缩放字体和间距？别只调 font-size，得配合 clamp() 和相对单位
单纯用 vw 或媒体查询切几档，容易在中等屏幕（比如 iPad 竖屏）出现字号过大或间隙过碎。关键是要让所有尺寸（字体、padding、gap）同频缩放。
参数差异：clamp(1rem, 2.5vw, 1.25rem) 中的中间值决定缩放斜率，两端控制上下限；gap 用 1vmin 比 1vw 更稳（取宽高较小者）。
- grid 容器设
font-size: clamp(0.875rem, 1.5vmin, 1rem)，子项文字用em继承 -
gap推荐用vmin单位，比如gap: 1vmin，比固定px或纯vw更适应横竖屏切换 - 慎用
scale缩放整个 grid —— 会模糊文字、影响点击热区，优先调基础尺寸
