grid容器height:100%失效的根本原因是其自身高度为auto，导致子项百分比高度失去参照；必须显式设置grid容器的height（如height:500px或height:100vh）才能使子项height:100%生效。
子项 height: 100% 在 grid 容器里不生效，根本原因是父级 grid 容器没有可计算的高度（即 height: auto），导致百分比失去参照基准。
grid 容器自身 height: auto 是罪魁祸首
Grid 容器默认是 height: auto，哪怕它被放在一个高为 500px 的父元素中，只要没显式设 height、min-height 或用 vh 等固定值，它的高度就由内容撑开——而子项的 height: 100% 会算成 100% × 0px = 0px。
常见错误写法：
.grid-container {
display: grid;
grid-template-rows: 1fr 2fr;
}
.grid-item {
height: 100%; /* ❌ 无效：.grid-container 高度是 auto */
}
- 别指望
grid-template-rows: 1fr自动给容器“赋高”——1fr只分配容器内部空间，不定义容器自身高度 -
align-items: stretch默认生效，但只对“无明确高度约束”的子项起作用；一旦子项写了height: 100%，它就转而依赖父容器的height值 - 即使父容器用了
min-height: 400px，height: 100%仍不认——它只认height，不认min-height
必须显式设置 grid 容器的 height
让子项百分比高度生效，最直接的方式就是切断 auto 链路，给 .grid-container 一个明确的 height 值。
- 用视口单位最稳妥：
height: 100vh或height: calc(100vh - 60px) - 用固定像素也行：
height: 600px，适合高度可控的模块 - 继承父级高度时，要确保整条链都有
height：html, body { height: 100%; }→ 父 wrapper 设height: 100%→.grid-container再设height: 100%
正确示例：
.grid-container {
display: grid;
grid-template-rows: 1fr 2fr;
height: 500px; /* ✅ 关键：提供明确高度上下文 */
}
.grid-item {
height: 100%; /* ✅ 现在能算出 500px 或对应 fr 分配值 */
}
flex 嵌套在 grid 子项里会让 height: 100% 更容易失效
如果 grid 子项内部又用了 display: flex，且你试图在 flex 项里再写 height: 100%，问题会叠加：父 grid 容器高度未定 → 子项无法拉伸 → flex 容器高度为 0 → 里面的 height: 100% 还是 0。
- 避免在 grid 子项上写
height: 100%，改用align-self: stretch（默认已有）让它自然填满轨道 - 如果子项内需滚动区域，优先用
flex: 1+min-height: 0，而不是height: 100% - Chrome 中偶发高度计算异常，可加
contain: layout到 grid 子项上强制隔离渲染
真正卡住人的从来不是 1fr 或 align-items，而是忘了 grid 容器自己也需要一个“身高”。没这个前提，所有百分比、1fr、甚至 minmax(0, 1fr) 都只是纸上谈兵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
