商品卡片高度不一致的根本原因是内容结构不统一，需在html层面强制图片容器设aspect-ratio、标题摘要截断、按钮文字统一，再配合flex或grid容器级控制实现等高。
商品卡片高度不一致，不是样式没写够，而是你还在用文档流或浮动硬扛——必须切换到容器级控制逻辑，否则调 min-height、height 都是徒劳。
为什么 align-items: stretch 没效果
它只在 display: flex 或 display: grid 容器上生效，且极易被三点打断：
-
.card写了height、max-height或min-height（哪怕只是min-height: auto） - 卡片内部用了
position: absolute的标题/按钮，脱离文档流、不参与高度计算 - 父容器没设明确高度上下文（如
min-height），尤其在grid-auto-rows: 1fr下会坍缩为 0
检查方式：打开开发者工具，选中“矮卡片”，看 align-self 是否为 auto，height 和 max-height 是否为 auto。
Flex 布局下真正等高的实操写法
别只给 .card 加 display: flex，要让所有卡片处于同一容器，并满足拉伸前提：
- 父容器设
display: flex+flex-wrap: wrap+align-items: stretch - 每张卡片加
flex: 1 0 calc(33.333% - 1rem)（避免margin破坏宽度计算） - 卡片内部用
display: flex+flex-direction: column，描述区加flex: 1，按钮加margin-top: auto - 统一图片样式：
img { height: 100%; object-fit: cover; }，并确保其父容器有明确高度
注意：flex-wrap 启用后，不同行之间不会对齐——需按每行 N 张手动包裹，例如 <div class="card-row"></div>，每个 .card-row 单独设 display: flex。
Grid 布局下更稳妥的替代方案
如果 Flex 跨行错位反复出现，直接换用 Grid：
- 父容器设
display: grid+grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)))+gap: 1rem - 加
align-items: stretch（默认已启用），但必须确保卡片内没设height或min-height - 图片区域加
aspect-ratio: 4/3+overflow: hidden，防止原始比例差异拉扯高度 - 标题和摘要统一截断：
display: -webkit-box+-webkit-line-clamp: 2+-webkit-box-orient: vertical
Grid 天然同列等高，不用额外 hack；但要注意 grid-auto-rows: minmax(200px, auto) 这类混合值会让 stretch 失效——改用 1fr 或显式 min-height。
响应式换行后内容结构不统一才是真问题
卡片高度不一致的根本原因，不是 CSS 写得不够“炫”，而是内容结构本身不统一：
- 标题行数不同、段落长短差异大、图片尺寸未约束、按钮文字长度浮动
- 移动端一行两列变三列时，某张卡片突然高出一截，视觉就崩了
- 仅靠
object-fit: cover不够，因为图片原始宽高比不一致，会导致容器高度被拉扯
关键在 HTML 层面强制结构一致：所有卡片的图片都包裹在统一 <div class="card-image"></div> 中，该 div 设置 aspect-ratio: 4/3 和 overflow: hidden；标题统一最多两行；摘要统一截断到 3 行；按钮文字统一用短词。这些细节比任何布局技巧都重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
