flex布局下卡片高度不一致的根源是align-items: stretch仅作用于同一行内元素，跨行不联动；grid通过grid-template-columns使同列卡片自动等高，更直接解决该问题。
flex布局下卡片高度不一致的根源
用 display: flex 做多列卡片时，如果子项内容长度不同，flex 默认按内容撑高，导致每行卡片底部错位。这不是 bug，而是 flex 的默认行为——align-items: stretch 只对同一行（flex line）内元素生效，跨行不联动。
常见错误是只加了 flex: 1 或 height: 100%，但没处理父容器的 flex-wrap 和子项的对齐上下文。
- 确保父容器设
display: flex+flex-wrap: wrap - 子卡片必须去掉
float、position: absolute等脱离文档流的样式 - 避免在卡片内部用
height: 100%，它依赖父级显式高度，而 flex 容器通常没有固定高
grid布局更直接地解决高度对齐
display: grid 天然支持行列对齐，只要把卡片设为 grid 项，用 grid-template-columns 划分列数，所有同列卡片会自动等高 —— 这是 grid 的基础能力，无需额外 hack。
关键不是“让卡片拉伸”，而是“让整列共享行高”。例如三列响应式布局：
立即学习“前端免费学习笔记（深入）”；
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}
注意：minmax(300px, 1fr) 中的 1fr 是弹性单位，auto-fit 能自动合并空列；若用 auto-fill，空列仍占位，可能影响对齐感知。
