根本原因是父容器高度未定义；CSS中height:100%依赖父元素显式高度，若html/body无height:100%，则子元素100%为0，grid无法自动撑开父级。
为什么 width: 100%; height: 100% 在 grid 容器上没效果
根本原因不是 grid 本身的问题，而是父容器高度未定义。CSS 中 height: 100% 是相对父元素计算的，如果父元素（比如 body 或 html）没有显式高度，100% 就等于 0。Grid 布局不会自动“撑开”父容器。
常见错误现象：网格容器只显示内容高度，顶部留白、底部被截断、整体远小于视口。
-
html和body默认不占满视口高度 - grid 容器设了
display: grid后，仍受常规盒模型约束 - 仅靠
width/height: 100%无法突破父级高度限制
让 grid 容器真正满屏的三步写法
必须同时处理根元素、文档流容器和 grid 本身。缺一不可。
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#my-grid {
width: 100vw;
height: 100vh;
display: grid;
grid-template-rows: 1fr 2fr 1fr;
}
-
html, body { height: 100% }是关键起点，否则子元素的100%无从参考 - 直接用
100vh比100%更可靠——它始终是视口高度，不依赖父级 -
width: 100vw避免滚动条导致的宽度偏差（100%可能因垂直滚动条变窄） - 如果容器有 margin/padding/border，记得加
box-sizing: border-box
min-height: 100vh 与 height: 100vh 怎么选
取决于是否允许内容溢出。二者行为差异直接影响布局稳定性。
立即学习“前端免费学习笔记（深入）”；
-
height: 100vh：强制固定高度，内容超长时会溢出或触发滚动条（取决于overflow） -
min-height: 100vh：保证至少满屏，内容更多时自动撑高，适合正文流场景 - 响应式中更推荐
min-height，避免小屏下内容被裁剪 - 若需严格满屏且禁止滚动（如全屏背景页），才用
height: 100vh+overflow: hidden
Flexbox 替代方案？没必要，但要注意兼容性陷阱
有人用 display: flex 实现类似效果，但 grid 本身完全胜任。真正要小心的是旧浏览器对 vh 的支持。
- IE11 支持
vh，但存在移动端 Safari vh 不重算，导致布局塌陷 - 如需兼容老 iOS，可用 JS 动态设置：
el.style.height = window.innerHeight + 'px'，并监听resize - 不要混用
100%和vh在同一层级——容易因 margin collapse 或 box model 计算错乱
html, body { height: 100% } 这一行。很多人只改了 grid 元素，忘了往上追两层。 
