grid-auto-rows: minmax(120px, 1fr) 是最直接有效的解法，通过设定行高最小值保底线、最大值用 1fr 保弹性，配合子项 flex 布局与图片约束实现视觉等高。
grid-auto-rows: minmax() 是最直接有效的解法
不等高元素在 Grid 中“自动对齐”不是靠对齐属性，而是靠容器主动定义行高规则。默认的 grid-auto-rows: auto 会让每行按内容最高项撑开，其余项虽被 align-items: stretch 拉伸，但内部文字换行、图片缺失、padding 差异仍导致视觉错位。用 grid-auto-rows: minmax(120px, 1fr) 可强制所有隐式行至少 120px 高，有剩余空间再均分，既保底线又留弹性。
- 最小值设为卡片标题+图标区域常见高度（如
120px），避免空行过大 - 最大值用
1fr比auto更可控：内容多时扩展，但不会无限撑高影响后续行 - 若需严格等高且容器有明确高度，改用
grid-auto-rows: 1fr（此时必须保证父容器有height或min-height）
align-items: stretch 不生效？先检查这三处
align-items: stretch 是 Grid 容器默认行为，但它只在子项没显式限制高度、没覆盖 align-self、且父行有明确高度上下文时才真正拉满。常见失效点：
- 子项写了
height、min-height或max-height—— 直接阻止拉伸 - 子项是 flex 容器但没设
min-height: 0，导致内部flex: 1区域无法收缩，进而撑破 grid 行高 - 子项内图片没加
height: 100%; object-fit: cover;，或父容器 box-sizing 是content-box，padding 把实际高度撑超
响应式卡片网格推荐组合写法
在 auto-fit + minmax() 场景下，单靠 grid-auto-rows 不够，需配合子项内部结构约束：
- 容器用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))+grid-auto-rows: 1fr - 每个卡片加
display: flex; flex-direction: column;，并设min-height: 0 - 卡片内文字区用
flex: 1; overflow: hidden;，按钮区用margin-top: auto; - 图片统一用
aspect-ratio: 4/3; object-fit: cover;，不依赖 height 值
别碰 align-content，它根本不管单行或高度不一致
align-content 只控制「多行轨道块」在容器交叉轴上的分布，前提是容器有固定高度且行高总和小于容器高度。你调 align-content: center 却发现没变化，大概率是因为：只有一行、容器没设 height/min-height、或 行高已占满容器。它对“为什么这一行里的卡片高度不齐”完全无感——那是 grid-auto-rows 和子项内部布局的事。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：Grid 层面对齐和卡片内部布局是两层逻辑，align-content 连第一层都穿不透，更别说协调内容溢出或 flex 嵌套的 shrink 行为。
