Flex布局通过align-items: stretch默认拉伸子项实现等高，但换行后失效；Grid用grid-auto-rows: 1fr更可控；内容截断需line-clamp统一，min-height应按最小信息量设定，图片用aspect-ratio保障比例。
用 display: flex + align-items: stretch 强制等高
卡片高度不一致，本质是默认文档流里块级元素各自“撑开”，内容多的就高、少的就矮。Flex 布局能天然解决这个问题：只要父容器设为 display: flex，子项默认会拉伸到容器高度（前提是没设 align-items: flex-start 这类覆盖值）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 卡片容器必须设
display: flex，且子卡片不用设固定height或min-height（否则反而破坏弹性） - 确保子卡片的
align-self没被意外设为flex-start或baseline - 如果卡片内有
position: absolute元素，它不会参与高度计算——得靠内部正常流内容撑起高度
Grid 布局中用 grid-template-rows: 1fr 更可控
Flex 在单行多列时等高很稳，但遇到换行（flex-wrap: wrap）后，跨行卡片就不再自动等高了。这时候 Grid 更适合——尤其你明确知道每行几列。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给容器设
display: grid和grid-template-columns: repeat(3, 1fr)（按需改数字） - 关键一步：加
grid-auto-rows: 1fr，让每行所有轨道都等分可用高度 - 避免混用
grid-row-start/grid-row-end打乱行高一致性 - 注意：IE 不支持
1fr在grid-auto-rows中的行为，如需兼容得降级为 Flex
内容截断导致视觉“假不等高”？用 line-clamp 统一行数
即使卡片物理高度一致，文字溢出方式不同（比如有的两行就停，有的三行才省略），也会让人感觉高度不齐。这不是布局问题，而是文本渲染干扰了视觉判断。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对标题或描述这类文案容器，加
display: -webkit-box+-webkit-line-clamp: 2+overflow: hidden - 别只靠
max-height配overflow: hidden，字体大小、行高变化时会错位 -
-webkit-line-clamp在 Firefox 旧版和部分安卓 WebView 里失效，可配合 JS 回退（但多数场景纯 CSS 已够用）
伪等高陷阱：min-height 设太小或太大都白搭
有人想“保险起见”给每张卡片设 min-height: 200px，结果发现内容少的卡片留白巨大，内容多的又撑爆——这反而放大了不协调感。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
min-height只用于兜底极简内容（比如空卡片），数值应基于最小必要信息量估算，不是拍脑袋定 200/300 - 若卡片含图片，记得给
<img alt="CSS如何制作高度一致且不管内容多少的平行卡片" >设height: auto和max-width: 100%，否则拉伸变形会破坏整体比例 - 用
aspect-ratio控制图片容器宽高比（如aspect-ratio: 4/3），比硬写height更适应响应式
真正难的不是让卡片“看起来一样高”，而是让它们在不同内容密度、不同字体渲染、不同缩放比例下，依然保持视觉节奏稳定。这时候，flex 或 grid 只是起点，后续得盯着真实设备上的文字折行、图片加载占位、甚至暗色模式下阴影带来的高度微差。
