父容器高度塌陷是因grid子项脱离文档流且父容器无明确高度，解决关键是让父容器自然感知子项实际空间：检查定位/布局干扰、显式定义行高（如grid-template-rows: auto）、用min-height: fit-content替代固定值，并确认子项真实渲染有高度。
父容器高度塌陷，本质是子元素使用 grid 布局后脱离了常规文档流的“撑高”机制，而父容器又没设置明确高度，导致计算出的高度为 0。解决的关键不是强行加 min-height，而是让父容器能**自然感知并响应子项的实际占用空间**。
确保 grid 容器本身参与高度计算
Grid 容器默认是块级元素，但若其父级设置了 display: flex 或 display: grid，或自身被设为 position: absolute/fixed，就可能脱离正常流，不再撑高祖先。检查并避免这些干扰：
- 父容器没意外设
height: 0、overflow: hidden（隐藏溢出会截断内容，视觉上像塌陷） - Grid 容器自身没写
position: absolute或float - Grid 容器没被 Flex/Grid 父容器用
align-items: start/center挤压高度
用 grid-auto-rows 或行轨道定义显式高度
如果子项是通过 grid-template-rows: repeat(auto-fill, ...) 或未定义行轨道，浏览器可能无法准确估算高度。显式声明行高更可靠：
-
grid-template-rows: auto;—— 让每行按内容自适应（推荐用于单行或多行不定高场景） -
grid-auto-rows: minmax(min-content, max-content);—— 确保新增行也能撑开容器 - 避免只写
grid-template-rows: 1fr;却无内容占位，1fr在无基准时可能归零
必要时用 min-height: min-content 替代固定值
比起写死 min-height: 200px，更语义化且响应式的做法是：
立即学习“前端免费学习笔记（深入）”；
-
min-height: min-content;—— 容器至少显示所有子项不换行时的最小高度 -
min-height: fit-content;—— 更常用，等价于内容自然高度（现代浏览器支持良好） - 慎用
height: auto—— 它不是属性，height默认就是auto，无效
检查子项是否“视觉存在但高度为零”
常见陷阱：子项用了 visibility: hidden、opacity: 0、空标签、或仅含 display: contents 元素——它们不贡献高度。确认子项真实渲染并有尺寸：
- 在开发者工具中查看子项的
computed height是否大于 0 - 临时加
outline: 1px solid red到子项，看是否真“看不见”而非“没高度” - 避免对 grid 子项设
height: 0或margin-bottom: -9999px类似 hack
