网格容器高度塌陷表现为高度为0px、背景边框不显示、下方元素上移；主因是子项脱离文档流或无内容，解决方案包括设min-height保底、用grid-template-rows: minmax(min-content, auto)强制撑开、避免混用float/absolute。
网格容器高度塌陷的典型表现
当你用 display: grid 创建容器，但子项全是 floated、absolute 定位，或本身没内容/高度为 0 时，父容器会“看不见”子项，表现为高度塌缩成 0 —— 浏览器 DevTools 里能看到容器高度是 0px，背景色/边框不显示，下方元素直接往上顶。
为什么 min-height 比 height 更常用
显式写死 height 容易导致内容溢出或截断，尤其响应式场景；min-height 允许容器随内容自然撑开，又防止空状态塌陷。常见做法：
-
min-height设为一个合理基线值，比如min-height: 200px - 配合
grid-auto-rows或grid-template-rows控制行高，避免子项被压缩 - 若子项含图片或异步加载内容，
min-height能保底占位，防止布局抖动
更健壮的兜底方案：用 grid-template-rows: minmax(min-content, auto)
单纯设 min-height 对某些嵌套结构（如子项自身也是 grid/flex）可能无效。此时可改用网格轨道定义来“强制撑开”：
grid-container {
display: grid;
grid-template-rows: minmax(min-content, auto);
}
这行代码让每行至少容纳其内容最小高度，且不设上限。对比：
立即学习“前端免费学习笔记（深入）”；
-
minmax(100px, auto)：最小 100px，内容高了就自适应 -
minmax(min-content, auto)：完全由内容决定下限，更灵活 - 注意：IE 不支持
minmax()，如需兼容需降级为min-height+ JS 检测
容易被忽略的触发条件：子项 position: absolute 或 float
网格容器内如果混用 position: absolute，那些元素会脱离文档流，网格算法不再计算它们的高度 —— 此时即使写了 min-height，也只对“剩余流内元素”生效。解决办法：
-
绝对定位子项必须配合
top/bottom/left/right显式定位，否则仍可能影响布局计算 - 避免在 grid 容器里用
float，CSS Grid 本身已替代浮动布局语义 - 真要混合定位，把绝对定位元素包一层空
div并设height: 100%，再让子项 relative 定位到它内部
