卡片高度不一致不是bug而是浏览器按内容自然撑开的默认行为，需用grid-auto-rows统一行高、align-items: start保证顶部对齐，并通过flex-column+margin-top:auto实现内部元素底部钉住。
卡片高度不一致导致视觉断裂，本质是 CSS 流式布局的默认行为
HTML 多列卡片（比如 display: grid 或 float / inline-block）高度不同，不是 bug，而是浏览器按内容自然撑开的结果。强行用 height 固定值会截断内容或留白，反而更难看。
真正要解决的是「视觉对齐」而非「物理高度一致」——用户感知的是顶部对齐、底部留白可控、标题行数一致这些细节。
- 优先用
display: grid配合grid-template-rows: masonry（仅 Chrome 115+ 支持，生产慎用） - 主流兼容方案：用
display: grid+grid-auto-rows控制最小行高，再配合align-items: start - 若必须支持 IE，改用 JavaScript 计算最大高度并统一设为
min-height，但要注意响应式断点需重算
用 CSS Grid 实现“伪等高”且不截断内容
关键不是让所有卡片像素级等高，而是让标题、图片、文字区域有可预测的节奏感。以下写法在 Safari / Firefox / Chrome 均稳定：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
align-items: start; /* 保证顶部对齐，避免悬浮错位 */
}
<p>.card {
display: flex;
flex-direction: column;
}</p><p>.card img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
}</p><p>.card h3 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0.5rem 0 0.75rem;
}</p><p>.card p {
margin-bottom: auto; /<em> 推文字到底部，留出一致的底部空间 </em>/
}</p><p>.card .footer {
margin-top: auto; /<em> 把按钮/标签这类元素钉在底部 </em>/
}注意：-webkit-line-clamp 只对块级元素生效，h3 必须加 display: -webkit-box；margin-bottom: auto 和 margin-top: auto 配合 flex-direction: column 才能实现内部弹性分隔。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
Flex 布局下卡片底部对齐失效的常见原因
很多人用 display: flex + flex-wrap: wrap 做多列，却发现 align-items: stretch 不起作用——这是因为父容器没设固定高度，子项 flex 项高度由内容决定，stretch 就没参照物。
- 错误写法：
.cards { display: flex; flex-wrap: wrap; }→ 卡片各行高度各自独立 - 正确思路：改用
display: grid，或给每行包一层div并设display: flex+align-items: flex-end - 如果坚持用 Flex，必须配合 JavaScript 统计每行元素，再对当行所有卡片设
min-height，否则无法底部对齐
另外，vertical-align: bottom 对 inline-block 有效，但只对行内上下文起作用，且无法控制卡片内部结构。
响应式断点下高度重排容易漏掉的细节
从 3 列切到 2 列时，原来同一行的卡片可能被拆到不同行，此时靠 JS 计算的「行高」就失效了。CSS 本身无法跨行通信，所以不能依赖单次计算。
- 用
@container查询（需开启 container queries）比媒体查询更精准，但目前仅 Chromium 111+ 支持 - 更稳妥的做法：放弃全局等高，转而约束局部区域，比如每张卡片的
img、h3、.footer分别设固定min-height或行数限制 - 特别注意字体加载时机：
font-display: optional可能导致首屏渲染时标题行高突变，建议用font-display: swap并预设行高
最常被忽略的一点：卡片阴影、边框、padding 的盒模型差异，会让看似相同的 min-height 在不同卡片里实际高度不一致。统一用 box-sizing: border-box 是底线。
