align-items: stretch默认开启但只实现单行内等高，因每行高度由本行最高内容决定；真正多行等高需用grid-auto-rows: minmax(0, 1fr)并确保容器有明确高度上下文及子项无height/min-height干扰。
不能只靠 align-items: stretch，它只管单行内拉伸；要真正“完美等高”，必须用 grid-auto-rows: minmax(0, 1fr) 或显式 grid-template-rows 配合容器高度约束。
为什么 align-items: stretch 看起来没用
它默认就开启，但只让同一行内的子项拉伸到“该行当前高度”——而这个高度由本行最高内容决定。下一行重新计算，结果就是第一行高 240px，第二行高 180px，视觉上依然错落。
常见错误现象：
- 开发者工具里看到每张卡片的
height值一致（DOM 高度确实等高），但底部对不齐——大概率是子项内margin-bottom、line-height或未清除浮动造成的视觉误差 - 某张卡片写了
align-self: start，直接覆盖了容器级的 stretch 行为 - 卡片自身设了
height、max-height或min-height，阻止拉伸
grid-auto-rows: minmax(0, 1fr) 才是多行等高的关键
grid-auto-rows 定义的是隐式创建的行轨道规则，也就是当卡片数量超出你显式定义的行数时，Grid 自动新增的那些行该怎么分配高度。设成 minmax(0, 1fr) 后：
立即学习“前端免费学习笔记（深入）”；
- 所有隐式行都遵循同一套规则，不会各行其是
-
0防止 Safari ≤15.4 对1fr的兼容 bug - 比纯
1fr更稳妥，尤其在内容极少或为空时
注意：grid-auto-rows 不影响你用 grid-template-rows 显式定义的那些行；如果用了 grid-template-rows: auto，那一行仍按内容撑开，和 grid-auto-rows 无关。
卡片内部结构必须配合，否则拉伸“形同虚设”
即使网格轨道高度统一了，如果卡片内部没处理好，视觉上还是不等高：
-
.card必须设display: flex; flex-direction: column; height: 100%，否则子元素无法占满分配的高度 - 底部按钮用
margin-top: auto推到底部，别用position: absolute（会脱离文档流） - 图片必须加
height: 100%; object-fit: cover或aspect-ratio，否则原始尺寸会撑破高度 - 文字建议加
display: -webkit-box; -webkit-line-clamp: 2或统一min-height，避免因省略位置不同造成视觉偏差
容器本身得有可计算的高度上下文
如果 Grid 容器高度是 auto（比如完全由内容撑开），那 1fr 就没有“剩余空间”可分，会退化为 min-content，看起来和 auto 没区别。
解决办法：
- 给容器设
min-height: 400px、height: 100vh，或嵌套在有明确高度的 flex/grid 父容器中 - 用
grid-template-rows: repeat(3, 1fr)时，必须确保容器有固定高度，否则无效 - 响应式切换列数（如从
repeat(3, 1fr)切到1fr）后，两卡片变成上下排列，不再共享行轨道，等高逻辑自动失效
最容易被忽略的是：你不是没写对属性，而是忘了给容器一个“能算高度”的前提。
