根本原因是未显式定义行高策略且子项干扰了align-items: stretch默认行为；需设grid-template-rows: 1fr或grid-auto-rows: minmax(0, 1fr)，并确保子项无height/max-height、align-self等覆盖。
为什么加了 display: grid 还是不等高
根本原因不是 Grid 失效，而是你无意中关掉了它的默认行为。Grid 容器默认 align-items: stretch，子项会自动拉伸填满行高——但这个行为极易被覆盖或干扰。
常见现象：两列内容一高一矮，右侧明显“塌陷”，开发者工具里看 computed height 却一致（说明 DOM 高度其实等高），但视觉上错位。这大概率是子项内部的 margin-bottom、line-height 或未清除的浮动导致的视觉误差，不是布局失效。
- 检查是否在某个
.item上写了align-self: start——它会直接覆盖容器级的align-items: stretch - 确认没给子项设
height、max-height或min-height，这些会阻止拉伸 - 父容器若设了
overflow: hidden，而子项有底部margin，会被截断，造成“看起来不等高” - 子项内用了
display: table-cell或position: absolute？它们脱离文档流，不再参与stretch计算
grid-template-columns 设了两列，但高度还是由内容决定
只写 grid-template-columns: 1fr 1fr 是不够的。Grid 的等高逻辑发生在“行”层面：同一行内的子项才等高。如果你没显式控制行高策略，而子项又没被约束在单行里，浏览器会按 grid-auto-rows: auto（默认）处理——即每行高度由该行最高子项内容撑开，但不同行之间高度不一致。
要让所有列真正等高（尤其只有两个子项时），必须确保它们落在同一行轨道，并让该行有可拉伸的高度依据：
- 最简方案：
grid-template-rows: 1fr—— 强制这一行占满可用高度，子项自然拉伸填满 - 更稳妥的写法：
grid-auto-rows: minmax(0, 1fr)—— 兼容 Safari ≤15.4 对1fr在隐式行中的 bug - 别漏掉
gap：用gap而非margin控制间距，避免margin干扰拉伸计算
响应式下从两列变一列，等高还成立吗
不成立。媒体查询里把 grid-template-columns 改成 1fr 后，两个子项变成上下排列、分属不同行轨道，align-items: stretch 只作用于各自所在行，不再有“横向比较”的基础。此时每项高度由自身内容决定，彼此无关。
如果你需要“无论几列都保持全局等高”，Grid 不适合——那是 Flexbox 的 flex-wrap: wrap 每行内等高 + JS 计算最大高度的组合场景。Grid 的等高是局部的、按行划分的。
- 纯响应式需求（两列→一列）：接受单列时不等高，这是合理预期
- 强一致性需求：放弃纯 CSS，改用 JS 获取所有子项
offsetHeight，取最大值后统一设min-height - 折中方案：用
minmax(min-content, 1fr)替代1fr，让内容少的列至少保留最小可用高度，减少视觉落差
IE11 下 display: -ms-grid 能不能等高
不能。IE11 的 -ms-grid 不支持 align-items，也不支持 stretch 行为，子项默认顶对齐，且没有属性能触发拉伸。即使你写了 -ms-grid-row-align: stretch，它也只对单个子项生效，且在子项内有内容、未清浮动时仍可能塌陷。
现实选择很窄：
- 彻底放弃 IE11 等高需求，用背景色/边框模拟视觉一致性
- 降级为 JS 方案：遍历所有子项，取
offsetHeight最大值，再赋给全部子项style.minHeight - 不推荐用
display: table-cell回退——它无法嵌套在 Flex/Grid 容器中，且 vertical-align 行为反直觉，维护成本高
真正容易被忽略的是：你以为在调样式，其实是在调试浏览器对默认行为的支持边界。Grid 的等高不是“做了什么”，而是“没关掉什么”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
