卡片高度不一致主因是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; /* 关键：让卡片在行方向拉满 */
}
.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 无法响应。