grid子项height: 100%不生效的主因是grid容器自身computed height为auto，缺乏计算基准；须手动设置容器高度（如height: 100vh）或确保父级高度链完整，并优先使用align-self: stretch而非height: 100%。
Grid容器自身computed height为auto
Grid子项写height: 100%不生效，最常见原因是Grid容器自己没高度——它的computed height是auto，子项根本找不到计算基准。浏览器不会因为写了display: grid就自动给容器设高，它仍按块级元素默认行为由内容撑开。
检查方法：DevTools里选中Grid容器 →「Computed」面板 → 看height值。如果是auto，哪怕你写了grid-template-rows: 1fr也白搭。
- 必须手动给Grid容器设高：
height: 100vh、min-height: 100vh，或确保html/body/所有父级都设了height: 100% -
min-height不等于height：父容器只有min-height: 500px，子项height: 100%依然无效 - 某些CSS reset（如Normalize.css）会把
html的height重置为0或auto，导致链路从起点就断
grid-template-rows固定值锁死子项高度
Grid轨道一旦用固定单位（如100px、2fr）定义，子项的height: 100%和min-height可能被忽略——浏览器优先按轨道分配空间，而不是让子项反向撑高。
比如grid-template-rows: 1fr 1fr，如果两行总高只有300px，子项写height: 100%也只能拿到150px，哪怕它内容更多。
- 想让某行“至少200px”，直接在轨道层写：
grid-template-rows: minmax(200px, 1fr) - 避免混用
grid-template-rows: 1fr和子项min-height: 200px——1fr没基准时退化为内容高度，min-height失效 - 用
grid-auto-rows: minmax(min-content, max-content)替代固定grid-template-rows，更适应动态内容
子项position: absolute脱离Grid布局流
Grid子项加了position: absolute，它就不再属于Grid布局流，height: 100%也不再相对于Grid容器计算，而是相对于第一个非static定位祖先（可能是html或视口）。
此时DevTools里看到的computed height往往是auto或0px，不是Grid容器的高度。
- 若必须绝对定位，显式指定包含块：
.grid-container { position: relative; } - 更稳妥的做法：去掉
position: absolute，改用Grid的place-self或justify-self/align-self控制位置 - 注意
z-index和层叠上下文影响，绝对定位子项可能被其他Grid项遮挡
现代替代方案比height: 100%更可靠
Grid子项填满轨道，默认就靠align-self: stretch（Grid容器默认align-items: stretch），根本不用写height: 100%。硬加反而容易触发兼容问题或干扰拉伸行为。
stretch关键字已在Chromium系浏览器支持（2025年6月起），可直接写height: stretch，它比100%更智能——能处理padding/border，且不依赖父级高度链。
- 优先删掉所有Grid子项上的
height: 100%、min-height: 100% - 需要填满剩余空间？用
grid-template-rows: auto 1fr auto+ 中间项不设高 - 想让子项撑满整行轨道？确认
align-self没被覆盖成start或end
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
