卡片高度不一致主因是CSS文档流中子项按内容撑开且父容器无约束；Grid布局通过align-items: stretch配合grid-template-columns自适应可实现统一拉伸，Flex多行则需固定父容器高度或改用Grid。
卡片高度不一致的常见原因
卡片高度不同，通常不是因为内容本身“高矮不一”，而是 CSS 默认的 display: block 和文档流行为导致：每个卡片按自身内容撑开，父容器不做约束，子项就各自为政。尤其在响应式网格（如 display: grid 或 float / inline-block）中，这一问题会立刻暴露——顶部对齐但底部参差不齐。
用 grid + align-items 实现统一高度
最直接可靠的方案是使用 CSS Grid，并让子项在交叉轴上拉伸。关键不在“设固定高度”，而在“让所有卡片自动填满容器可用空间”。
-
grid-template-rows不要设死值（如100px），改用1fr或留空让浏览器自动分配 - 必须设置
align-items: stretch（grid 容器默认值，但显式写出更安全） - 确保卡片本身没有
min-height、height或overflow: hidden干扰拉伸
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
align-items: stretch; /* 关键：让卡片在行方向拉满 */
}
<p>.card-grid > .card {
display: flex;
flex-direction: column;
}Flex 布局下卡片高度同步的陷阱
用 display: flex 做卡片行时，单行内卡片高度会自然一致（flex item 默认 align-items: stretch），但跨多行时无效——每行独立计算高度。此时若想全局统一，需配合 flex-wrap: wrap + 高度控制策略：
- 给所有
.card设置height: 100%，并确保父级（flex 容器）有明确高度（比如min-height: 400px） - 或改用
display: grid，避免 flex 多行高度不可控的问题 - 切忌对卡片设
flex: 1后又加height: auto，这会覆盖拉伸行为
内容截断与视觉一致性补救
即使高度拉齐，文字过多仍会导致卡片内部溢出或换行错位。这不是高度问题，而是内容渲染问题：
立即学习“前端免费学习笔记（深入）”；
- 标题用
line-clamp限制行数：display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; - 正文区域加
min-height占位，防止因文字过少导致卡片“塌陷” - 避免在卡片内用
position: absolute脱离文档流，它会让 height 计算失效
真正难处理的是异步加载内容后高度重排——这时需要监听 resize 或用 ResizeObserver 主动触发重布局，纯 CSS 无法响应。
