卡片高度不一致的根本原因是内容结构不统一，包括标题行数、段落长短、图片尺寸和按钮文字长度差异；应通过grid-template-rows+minmax()锁定内容区域最小高度，并在HTML层面统一图片容器、标题行数、摘要行数及按钮文案，辅以flex下height:0;min-height:100%等高技巧。
为什么卡片高度不一致是响应式布局里的高频问题
根本原因不是 CSS 写得不够“炫”，而是内容结构本身不统一：h2 行数不同、p 段落长短差异大、图片尺寸未约束、按钮文字长度浮动——这些都会让 flex 或 grid 容器里的卡片在换行或缩放时高度错乱。尤其在移动端，一行两列变三列时，某张卡片突然高出一截，视觉就崩了。
用 grid-template-rows + minmax() 锁定内容区域高度
别靠 height: 100% 硬撑，它依赖父容器高度，而响应式里父容器高度常是 auto。真正可控的是内容区块的“最小可用高度”：
.card-content {
display: grid;
grid-template-rows: minmax(4rem, max-content) minmax(6rem, max-content) 1fr auto;
row-gap: 0.75rem;
}
说明：第一行标题固定最小 4rem，第二行摘要最小 6rem，中间正文用 1fr 均分剩余空间，底部按钮区用 auto 自适应。这样即使标题只有一行，它也不会塌陷，留白由 minmax() 托底。
常见错误：grid-template-rows: 4rem 6rem 1fr auto —— 固定值会让短内容卡片顶部留白过大，长内容又可能溢出。
立即学习“前端免费学习笔记（深入）”；
图片和文字必须做“结构对齐”而非“样式对齐”
仅给 img 加 object-fit: cover 不够，因为图片原始宽高比不一致，会导致容器高度被拉扯。关键在 HTML 层面强制结构一致：
- 所有卡片的图片都包裹在统一
<div class="card-image"></div>中，且该 div 设置aspect-ratio: 4/3和overflow: hidden - 标题统一限制为最多两行：
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; - 摘要段落统一截断到 3 行，用相同 CSS 类，不依赖内容字数
- 按钮文字统一用短词（如“查看详情”“立即申请”），避免“点击这里了解更多详情”这种弹性文本
Flex 布局下 height: 0; min-height: 100% 的隐藏陷阱
当用 display: flex; flex-wrap: wrap 排多张卡片时，某些浏览器（尤其是 Safari）对 align-items: stretch 的实现会受子元素内部 height 影响。这时加一句：
.card {
height: 0;
min-height: 100%;
}
能强制卡片在 flex 容器中按行等高拉伸。但注意：height: 0 会让绝对定位子元素丢失参考基准，如果卡片内有 position: absolute; bottom: 0 的按钮，得额外给卡片加 position: relative 并确保其 min-height 足够容纳所有内容。
最易忽略的一点：这个技巧只在卡片作为 flex item 时生效，如果卡片又被嵌套进另一个 grid 或 inline-block 容器里，它就失效了——得回退到 grid 方案。
