Grid子项高度被“压扁”主因是align-items: stretch失效，常见于子项设height/min-height、flex布局未配flex-direction/column、align-self:start或IE11兼容问题；应清除尺寸限制、确保内容可撑高、降级处理旧浏览器。
grid 子项高度被父容器“压扁”了怎么办
Grid 容器默认采用 align-items: stretch，子项会拉伸填满行高——但前提是子项自身没有设置 height、min-height 或 max-height，且内容没触发 BFC 或 flex 布局等干扰行为。一旦子项内有 display: flex 或 position: absolute，就可能让拉伸失效。
- 检查子项是否意外设置了
height: 0、min-height: 0或overflow: hidden（尤其在封装组件中） - 确认子项没有用
display: flex包裹内容却忘了设flex-direction: column和flex: 1 - 避免在子项上写
align-self: start或align-self: flex-start——这会直接关闭 stretch 行为
grid-template-rows 设为 auto 后子项仍不撑开
grid-template-rows: auto 只控制轨道高度计算方式，不等于“让子项决定高度”。真正起作用的是子项自身的尺寸约束和内容流行为。
- 若子项含浮动元素或绝对定位子元素，需手动清除或设
overflow: auto触发 BFC，否则高度塌陷 - 当子项是空的或只含 inline 元素（如纯文本无换行），其
min-height实际为 0，此时即使auto也撑不出高度 - 可临时加
min-height: min-content强制按内容最小高度计算，比auto更可靠
子项内嵌 flex 布局导致 grid 高度失效
这是高频踩坑点：子项设了 display: flex，但没给它明确的高度来源，grid 就无法从 flex 容器内部“感知”内容高度。
.grid-item {
display: flex;
flex-direction: column;
}
.grid-item > .content {
flex: 1; /* 让内容区占满剩余空间 */
}
/* ✅ 正确：flex 容器自身不设 height，靠父 grid 的 stretch 拉伸 */
/* ❌ 错误：.grid-item { height: 100% } —— 100% 相对谁？父 grid track 高度可能为 0 */- 不要给 flex 子项容器设
height: 100%，改用align-self: stretch（默认已有） - 如果 flex 子项里有滚动区域，用
flex: 1+min-height: 0防止 flex 容器过度收缩 - Chrome 中偶尔需加
contain: layout到子项，修复 flex+grid 混合时的高度计算异常
IE11 下 grid 子项高度完全不响应
IE11 的 Grid 实现不支持 align-items: stretch 对 flex 子项的拉伸，也不识别 min-content 等现代关键字。
立即学习“前端免费学习笔记（深入）”；
- 降级方案：用
display: -ms-grid并显式设置-ms-grid-row-span，配合height: auto - 更稳妥做法：对 IE11 单独用
display: block+float/inline-block布局，放弃 grid - 若必须用 grid，至少确保子项有明确的
min-height: 200px类兜底，避免彻底塌陷
子项高度不自适应，往往不是 grid 本身的问题，而是子项内部布局模型和尺寸约束之间产生了隐性冲突。最易忽略的是：flex 容器在 grid 子项中默认不继承 stretch 行为，必须靠父级 grid 的拉伸能力来驱动，而这个能力极易被一个 min-height: 0 或 overflow: hidden 关掉。
