只写display: grid不一定等高，因grid等高仅限同一行内且依赖align-items: stretch和可伸展行轨道；未设grid-template-rows时按auto逐行撑开，各行独立计算高度。
为什么只写 display: grid 不一定让子项等高
因为 Grid 的等高行为只在“同一行内”生效，且依赖 align-items: stretch（默认值）和可伸展的行轨道。如果没显式控制行高策略，浏览器会按 grid-auto-rows: auto 处理——即每行高度由该行最高子项内容撑开，不同行之间互不影响。你看到的“不等高”，其实是多行布局下各行独立计算的结果，不是 Grid 失效。
- 子项数量超过单行容量时，Grid 自动创建新行，
stretch仅作用于各自所在行 -
grid-template-rows没写或设为auto时，行高由内容决定；设为1fr才强制均分可用空间 - 父容器高度为
auto时，1fr可能退化为最小内容高度，视觉上仍像“不等高”
grid-template-columns 配合默认行为就能实现单行等高
对纯横向多列（如三张卡片并排）、且只有一行的场景，最简写法就是只定义列，不碰行：
- 用
grid-template-columns: repeat(3, 1fr)或1fr 1fr 1fr明确列宽分配 - 完全不写
grid-template-rows，让 Grid 按内容生成单行，并启用默认align-items: stretch - 确保子项没设
height、max-height、align-self，否则会退出拉伸 - 避免子项内用
display: table-cell或position: absolute，它们脱离文档流，不参与 stretch 计算
多行网格要全等高，必须同时配 grid-template-rows 和 grid-auto-rows
如果你的网格项超过一排（比如响应式下自动换行），只靠默认行为无法让所有行高度一致。此时需双管齐下：
-
grid-template-rows: 1fr控制显式定义的行（通常是第一行） -
grid-auto-rows: 1fr或更稳妥的minmax(0, 1fr)控制后续隐式生成的行 - 两者值最好一致，否则会出现“第一行高、第二行矮”的视觉断裂
- Safari ≤15.4 对纯
1fr在隐式行中有 bug，minmax(0, 1fr)是兼容性兜底方案
响应式下从多列变单列，等高逻辑就失效了
媒体查询里把 grid-template-columns 改成 1fr 后，原本同行的两个子项变成上下排列、分属不同行轨道。align-items: stretch 依然生效，但只作用于各自所在行——也就是每项高度由自身内容决定，彼此不再关联。
- 这不是 bug，是 Grid 的设计本质：等高是行级局部行为，不是全局统一约束
- 若真需要“无论几列都绝对等高”，Grid 不适合，得切到 Flexbox + JS 计算最大高度，或接受单列时不等高的合理预期
- 常见误判：用
overflow: hidden截断了子项底部margin，看起来像塌陷，实际 DOM 高度已等高
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
