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 关掉。