Grid子元素height: 100%失效，因父容器computed height为auto导致计算结果为0px；需显式设置Grid容器高度（如100vh）并给子项加min-height: 0，或直接用1fr替代。
Grid子元素的height: 100%失效，不是写错了，而是它根本没拿到可计算的父级高度——Grid容器自身若为height: auto，子元素的百分比就等于100% × 0px = 0px。
Grid容器本身没有显式高度，子元素百分比就无从算起
浏览器对height: 80%的计算只依赖**直接父容器的 computed height**。如果Grid容器（比如.grid）样式里只有display: grid而没设height、min-height或max-height，它的computed height就是auto，子元素的百分比立刻退化为无效。
- 常见现象：
.grid { display: grid; grid-template-rows: 1fr 2fr; }，但整个网格只高两行文字，height: 100%的子项完全不拉伸 - 必须给Grid容器加明确高度：如
height: 100vh、min-height: 400px，或从html/body逐层继承下来的height: 100% - 用开发者工具选中Grid容器 → Computed → 查
height值：是auto就说明链路断了；是720px或100vh才算通
Grid Item默认不拉伸，height: 100%需配合min-height: 0
即使Grid容器有高度，Grid Item（即子元素的直接父级）默认行为是“内容收缩”，不会自动填满轨道。此时写height: 100%仍可能被忽略，尤其在Chrome中。
- 必须给Grid Item加
min-height: 0（不是min-height: 0px），解除其默认最小尺寸锁定 - 如果Grid Item内部还嵌套Flex容器，那个Flex容器也得加
min-height: 0，否则Flex子项依然拿不到空间 -
align-items: stretch是Grid Item默认行为，但它会被min-height: 0或height: fit-content覆盖，别混用
用1fr代替height: 100%更可靠
在Grid布局中，百分比高度是“绕远路”；1fr才是原生的空间分配机制，不依赖父级是否显式设高（只要Grid容器自身有高度上下文）。
立即学习“前端免费学习笔记（深入）”；
- 想让子元素占满某一行轨道？直接写
grid-row: 1 / -1或把该子元素放进grid-template-rows: 1fr的轨道里 - 避免在Grid Item上同时写
height: 100%和flex: 1：前者是初始尺寸参考，后者会接管空间分配，容易冲突 - Safari 14–15.6对
height: 100%支持极差，哪怕父级是height: 100vh也可能不渲染；1fr或flex: 1是更稳妥的跨浏览器解法
真正容易被忽略的，是没打开开发者工具点开Grid容器和每一层父级，逐个确认Computed面板里的height是不是具体数值——而不是靠“应该有了”去猜。
