align-content 对卡片高度不一致无效，它仅控制多行网格轨道在交叉轴上的整体分布；真正起作用的是 grid-template-rows 或 grid-auto-rows。
align-content 对卡片高度不一致根本无效
直接说结论：align-content 不是用来解决卡片“高度不一致”的，它只控制**多行网格轨道在容器交叉轴上的整体分布方式**，前提是容器有固定高度且内容生成了多行。如果你的卡片高度参差不齐，却去调 align-content: center，只会发现毫无变化——因为问题不在“行怎么排”，而在“每行本身高多少”。
真正起作用的是 grid-template-rows 或 grid-auto-rows
卡片视觉高度不一致，本质是 Grid 容器没给行高强约束，grid-auto-rows 默认为 auto，浏览器按每行最高项撑开，其余项虽被 align-items: stretch 拉伸，但内部文字换行、图片缺失、padding 差异仍导致视觉错位。
- 要强制等高：用
grid-template-rows: repeat(3, 1fr)（需父容器有height或min-height） - 要兼顾最小保障与弹性：用
grid-template-rows: repeat(3, minmax(200px, 1fr)) - 响应式场景更推荐
grid-auto-rows: 1fr，它作用于隐式行，配合grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))更自然 - 别忘了加
min-height: 0到卡片上，否则内部 flex 布局可能因 shrink 失效而撑破
align-items: stretch 为什么看起来没拉齐
align-items: stretch 是默认值，但它只在子项**未设置 height / max-height / align-self** 时才生效。常见失效原因：
- 卡片内写了
height: 100%却没给父级（即 grid item）设position: relative或明确高度上下文 - 图片没加
height: 100%; object-fit: cover;，或父容器 box-sizing 是content-box - 用了
grid-row: span 2的卡片，它脱离单行约束，直接破坏整行对齐逻辑 - 卡片内部是
display: flex; flex-direction: column，但没给内容区设flex: 1或min-height，导致文字区塌缩
最稳妥的组合方案
不要只靠一个属性。实际项目中，建议这样配：
- 容器设
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))+grid-auto-rows: 1fr+min-height: 0 - 每个卡片加
display: flex; flex-direction: column;，标题/描述/按钮拆成区块 - 描述区设
flex: 1; min-height: 4em;，按钮区设margin-top: auto; - 图片统一用
aspect-ratio: 4/3; object-fit: cover;，不依赖 height
复杂点在于：Grid 层面对齐和卡片内部布局是两层事，align-content 连第一层都管不了，更别说穿透进去。容易被忽略的是——你调了半天 align-content，其实该查的是 grid-template-rows 写没写，以及卡片自己有没有偷偷设 height 或 align-self。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
