grid容器在flex父级中不撑开的根本原因是flex的align-items: stretch与grid尺寸推导冲突，且grid项默认不继承交叉轴空间；需为grid子项添加flex: 1或height: 100%，并确保flex父级有确定高度，否则align-content等将失效。
Grid 容器在 Flex 父级里不撑开、内容塌陷、对齐失效，根本原因是 Flex 的 align-items: stretch 与 Grid 的尺寸推导逻辑冲突，且 Grid 项默认不继承父级交叉轴空间。
Flex 父容器没给 Grid 子项分配交叉轴空间
Flex 默认用 align-items: stretch 拉伸子项，但这个拉伸只作用于“有明确主轴尺寸”的子项。而 Grid 容器本身没有固有高度，Flex 不会主动把它“撑满”交叉轴（即高度方向）。
- 必须给 Grid 子项加
flex: 1或height: 100%，让它主动占满 Flex 分配的可用空间 - 如果 Flex 父容器本身没设
height（比如仅靠内容撑高），Grid 子项就彻底失去高度依据 - 常见错误：只写
display: grid，却忘了flex: 1这个关键连接点
Grid 容器被 Flex 的 min-height / height 规则压制
当 Flex 父级设置了 min-height: 0 或 height: fit-content，它会覆盖 align-items: stretch 的行为，导致 Grid 子项收缩为内容高度，而不是填满区域。
- 修复方式：在 Grid 子项上显式加
min-height: 0（解除 Flex 对最小尺寸的隐式限制） - 或改用
height: 100%，但前提是 Flex 父级已有确定高度（如height: 100vh） - 避免同时写
align-items: stretch和height: fit-content—— 后者会直接禁用拉伸
浏览器计算顺序导致 justify-content/align-content 失效
Grid 的 justify-content 和 align-content 只在 Grid 容器有“多余空间”时才生效。如果 Grid 子项被 Flex 压缩成刚好贴合内容的高度，就没有“多余空间”可分配了。
- 先检查 computed 样式里 Grid 容器的最终
height—— 是 auto？还是具体像素值？ - 若为
auto，说明它没拿到高度，align-content必然不触发 - 此时不是 Grid 属性写错了，而是外层 Flex 没把空间传进来
真正卡住的地方往往不在 Grid 代码本身，而在 Flex 父级是否把高度“交出来”。很多人调 Grid 的 grid-template-rows 调到崩溃，其实该回去看一眼 flex: 1 漏没漏写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
