align-items: stretch 失效主因是卡片内存在固定高度、flex布局未设flex:1、图片未约束比例或文字行数不一；需结合flex-column、aspect-ratio、object-fit及文本截断等综合控制。
为什么 align-items: stretch 没让卡片高度一致
默认情况下，align-items: stretch 确实会让 grid item 在交叉轴（通常是垂直方向）拉伸填满容器，但前提是：**item 内部没有设置固定高度、max-height，且内容未触发最小高度限制**。常见失效场景是卡片内部用了 display: flex + flex-direction: column，又没给子元素设 flex: 1，导致内容撑高不均；或者卡片里有图片未设 height: 100% 或 object-fit，留白不一致。
卡片内文字行数不同导致高度差异怎么压平
纯靠 align-items: stretch 无法约束内容本身的高度弹性。必须配合内容层的控制：
- 给卡片容器设
display: flex+flex-direction: column+height: 100% - 标题、描述等区块用
flex: 1占满剩余空间，避免文字多的卡片“鼓包” - 图片区域加
min-height或aspect-ratio防止塌缩，再配合object-fit: cover - 避免对
p、div等文本容器设height或min-height（除非统一值）
.card {
display: flex;
flex-direction: column;
height: 100%;
}
.card img {
aspect-ratio: 16/9;
object-fit: cover;
width: 100%;
}
.card h3,
.card p {
margin: 0;
}
.card p {
flex: 1;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
Grid 容器上哪些设置会干扰 align-items: stretch
以下配置会让 align-items: stretch 失效或表现异常：
-
grid-template-rows设了固定值（如100px），而非1fr或auto - 卡片本身设了
align-self: start（覆盖了容器的align-items） - 父容器（grid container）没设明确高度，导致 stretch 无参照基准（此时需设
min-height或height） - 用了
grid-auto-rows: minmax(200px, auto)这类混合值，实际高度由内容决定而非 stretch
替代方案：不用 stretch 也能强制等高
如果 stretch 不可控（比如要兼容老浏览器，或卡片结构太复杂），可改用 grid-template-rows + fit-content() 或 JS 补偿：
立即学习“前端免费学习笔记（深入）”；
- CSS 方案：用
grid-template-rows: repeat(auto-fill, minmax(300px, 1fr)))+align-items: start，再靠卡片内部 flex 布局统一高度 - JS 方案：监听
resize，用Math.max(...cards.map(c => c.offsetHeight))批量设min-height（仅限小规模卡片） - 更稳妥的 CSS-only：把卡片设为
display: contents（慎用，会脱离文档流），或用container-type: inline-size+@container做响应式截断
真正难的不是拉伸，而是让所有卡片在不同内容长度下，视觉上“看起来一样高”——这往往需要内容裁剪、图片比例锁定、以及 flex 内部的弹性分配三者配合。单靠一个 align-items: stretch 很少能 standalone 解决问题。
