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，空列仍占位，可能影响对齐感知。
flex方案中必须加的两个关键声明
如果必须用 flex（比如兼容 IE10+），仅靠 flex-direction: row 不够，得配合以下两项才能实现视觉上“每行等高”：
- 父容器加
align-content: flex-start：防止多行时行间距被拉伸，让各行顶部对齐 - 每个卡片加
display: flex+flex-direction: column+height: 100%，再让内部内容区用margin-top: auto推到底部（适用于标题+描述+按钮结构）
示例卡片内部结构：
.card {
display: flex;
flex-direction: column;
height: 100%;
}
.card-content { flex: 1; }
.card-footer { margin-top: auto; }
响应式断点下 grid 的列数切换陷阱
用媒体查询改 grid-template-columns 时，容易忽略 gap 在小屏下造成的溢出。比如 gap: 1.5rem 在 320px 屏幕上，三列实际需要至少 3 × min-width + 2 × gap，很容易超出视口。
更稳妥的做法是：
- 用
minmax()替代固定列宽，如minmax(280px, 1fr) - 在小屏下改用
grid-template-columns: 1fr，而非强行维持两列 - 避免对
gap做大范围缩放，可统一用clamp(0.5rem, 2vw, 1rem)控制其响应性
真正难的不是让卡片等高，而是让等高后的空白区域不破坏信息层级 —— 比如长描述卡片拉高后，短卡片的按钮位置飘太高，这时得靠内部 flex 微调，而不是硬塞 padding。
