用 grid-auto-rows: minmax(10rem, auto) 实现多行卡片等高，因 align-items: stretch 仅单行内拉伸且各行高度独立；grid-auto-rows 定义隐式行轨道规则，确保所有行遵循统一最小高度与内容自适应逻辑。
直接结论：用 grid-auto-rows: minmax(10rem, auto)，不是 grid-template-rows: 1fr，也不是靠 align-items: stretch 单独撑高。
为什么 align-items: stretch 不够用
它只让同一行内的卡片拉伸到“该行当前高度”，而这个高度由本行内容最高的那张卡片决定——下一行又重新算一次。结果就是：第一行高200px，第二行高140px，第三行高260px……视觉上还是参差不齐。
常见错误现象：display: grid 加了 align-items: stretch（默认就有），但卡片依然高低错落；检查开发者工具会发现每行的 grid-row 高度各不相同。
- 它不跨行生效，只管单行内部对齐
- 如果某行所有卡片都很空，这行就会塌缩得很矮
- 无法约束“整组多行”保持统一基准高度
grid-auto-rows 才是控制多行等高的关键
grid-auto-rows 定义的是**隐式行轨道**的高度规则，也就是当卡片数量超出你显式定义的行数时，Grid 自动创建的新行该怎么分配高度。设成 minmax(10rem, auto) 后，每一行都会：
- 至少有 10rem 高（防塌陷）
- 若该行某张卡片内容超长，整行自动撑高到那个高度
- 同一页中所有行都遵循同一套规则，不会各行其是
对比错误写法：grid-template-rows: 1fr 只影响第一行；grid-auto-rows: 1fr 在没有固定容器高度时会失效（浏览器不知道“1fr”分给谁）。
推荐写法示例：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-auto-rows: minmax(10rem, auto);
gap: 1rem;
}
卡片内部结构必须配合，否则拉伸失效
即使 grid-auto-rows 设对了，如果卡片内部用 position: absolute、没设 height: 100% 或子元素溢出未截断，也会导致视觉“假不等高”。
-
.card必须设display: flex; flex-direction: column; height: 100%，否则内部无法占满网格轨道 - 底部按钮之类需要固定位置的，用
margin-top: auto推到底部，别用position: absolute - 文字内容建议加
line-clamp或min-height统一基础行数，避免因省略位置不同造成视觉误差 - 图片记得加
aspect-ratio或object-fit: cover，防止比例失真撑开高度
兼容性和边界情况提醒
grid-auto-rows: minmax() 在 IE 中完全不支持；如需兼容旧版浏览器，只能降级为 display: flex; flex-wrap: wrap + JS 计算最大高度（不推荐）。
另一个容易被忽略的点：min-height: 0 要加在卡片或其 flex 子容器上——否则某些嵌套 flex 场景下，浏览器可能忽略 height: 100% 导致拉伸失败。
最后注意：如果你给容器设了 height: 400px 并用 grid-auto-rows: 1fr，那所有行会平分这 400px，而不是按内容自适应——这种场景适合固定高度画布，而非内容驱动的卡片流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
