Grid容器height为auto时子项height:100%计算为0px，因100%需父元素具体computed height；常见原因包括html/body未设height:100%、中间层display异常、Flex嵌套未设min-height:0等。
Grid容器自身height为auto，子项的100%无基准可算
浏览器计算 height: 100% 时，只认父元素的 **computed height** 值。如果 Grid 容器（比如 .grid-container）在开发者工具「Computed」面板里显示 height: auto，那它的所有子项写 height: 100% 都等于 100% × 0px = 0px —— 不是“没生效”，是真被算成零高，视觉上直接塌缩。
常见断点位置包括：
- html 或 body 没设 height: 100%（二者必须同时写）
- 中间某层用了 display: inline、display: table-cell 或 float，破坏了包含块链路
- Grid 容器本身是 Flex 子项但没加 min-height: 0，被父级 Flex 的默认最小高度限制卡住
写了grid-template-rows: 1fr却仍塌陷？先看容器有没有“可用高度”
1fr 不是魔法单位，它代表“把父容器的**可用高度**按比例分配”。如果 Grid 容器自身 height 是 auto，那它的可用高度就是 0，1fr 就退化为 auto，行高完全由内容决定。
验证方法很简单：打开开发者工具，选中 Grid 容器，看「Computed」→ height 是否为具体像素值（如 624px）。如果是 auto，说明整条高度链从根就断了。
临时修复可加：
- min-height: 100vh（注意 iOS Safari 地址栏收放会重算 vh）
- 若 Grid 在 Flex 容器内，父级设 flex: 1，Grid 容器再加 height: 100%; min-height: 0
子项自己写了height/min-height/max-height，悄悄关掉了align-items: stretch
Grid 容器默认 align-items: stretch，但它只在子项**未声明块轴尺寸约束**时才生效。一旦某个子项写了 height: 200px、max-height: 300px，甚至只是 min-height: fit-content，浏览器就会跳过 stretch 行为，该子项就不再参与等高拉伸。
排查建议：
- 选中一个“矮”的子项，在「Computed」里检查 align-self 是否为 auto（继承 stretch），同时确认 height 和 max-height 都是 auto
- 批量重置：给所有子项加 align-self: stretch，比依赖继承更可靠
- 删掉所有子项上的 height、max-height；min-height 可保留，但别设成 min-height（空值无效，易误写）
Flex嵌套在Grid子项里，双重失效风险叠加
当 Grid 子项内部又是一个 Flex 容器，且你想让 Flex 项填满这个子项时，问题会叠加：Grid 子项没高度 → Flex 容器没高度 → Flex 项的 height: 100% 还是 0。
关键修复点：
- 给 Grid 子项（即 Flex 容器的直接父级）加 min-height: 0 或 height: 100%（前提是 Grid 容器已有高度）
- 给 Flex 容器本身加 height: 100% 或 min-height: 0，解除 Flex 项默认的 min-height: auto 限制
- 避免在 Grid 子项上同时写 align-items: stretch 和 height: fit-content，后者会覆盖前者
真正难缠的不是某一行代码写错，而是高度链路上任意一层的 auto 都会让整条链静默失效——它不报错，只给你一个看不见的 0px。每次怀疑 height: 100%，第一反应不该是改子项，而是打开开发者工具，从 html 开始逐层点开「Computed」，盯着 height 看是不是具体数值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
