grid容器高度坍塌主因是缺乏高度上下文，1fr需min-height: 100vh等显式基准；单行轨道无效，应改用auto 1fr auto；嵌套flex时需同步设min-height: 0或height: 100%；minmax(min-content, auto)比硬编码更稳妥。
Grid 容器高度坍塌不是 CSS 写错了，而是它根本“没高度可撑”——display: grid本身不提供高度基准，必须由你显式给它一个可计算的上下文。
grid-template-rows: 1fr 为什么无效？
因为 1fr 分配的是“剩余空间”，而容器若没设 height 或 min-height，剩余空间就是 0。此时浏览器退化为 auto 行高，所有内容按最小自然高度堆叠，视觉上就是塌陷。
- 用
min-height: 100vh替代height: 100%：后者依赖父级有高，前者直接锚定视口，更可靠 - 避免只写
grid-template-rows: 1fr—— 单行轨道无法触发多行对齐逻辑，且无 fallback 高度 - 在响应式布局中，可结合 calc：
min-height: calc(100vh - 64px)（减去 header 高度）
嵌套 Flex 时子项不撑高怎么办？
Grid 项默认 align-items: stretch，但只作用于交叉轴；Flex 容器若自身无高度，它的主轴（比如 flex-direction: column）就无法分配空间，子项只能收缩。
- Grid 项需加
min-height: 0或height: 100%（前提是 Grid 容器已有高度） - 内部 Flex 容器必须同步加
height: 100%或min-height: 0，否则 flex item 被默认min-height: auto卡住 - 别在同一个 Grid 项上同时写
align-items: stretch和height: fit-content—— 后者会直接禁用拉伸
minmax() 真的能防塌陷吗？
能，但仅当用对位置、对象和取值。错用 minmax(0, 1fr) 反而会让行高归零。
- 必须用在
grid-template-rows（不是grid-auto-rows），才参与容器高度计算 -
minmax(min-content, auto)是最稳妥的选择：下限取子项最小自然高度（如文字行高、图片固有高），上限随内容弹性伸展 - 若子项是
position: absolute或display: contents，它不贡献min-content，这条规则就失效 -
minmax(100px, auto)可作兜底，但硬编码值不如min-content动态适配真实内容
overflow: hidden 是解药还是遮羞布？
它常让塌陷“看起来好了”，但只是意外触发了 BFC 并撑开了容器，并未解决根本问题。删掉它，布局立刻复现错误。
- 检查 DevTools 的 Computed 面板：
height是否真大于 0；若为0px，说明 overflow 没起作用，只是掩盖了高度缺失 - 它还会干扰子项收缩行为，尤其在 Safari 和旧版 Chrome 中，导致
minmax(0, 1fr)失效或列宽崩坏 - 真正该加的是
min-height，而不是靠overflow: hidden蒙混过关
最易被忽略的点是：你以为 minmax() 写对了，但子项压根没渲染出高度——比如空标签、visibility: hidden、或内部全是 display: contents 元素。调试时先看子项的 Computed height 和 min-height，比反复调 Grid 属性更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
