根本原因是盒模型行为未约束，需对齐flex/grid拉伸逻辑、内容自然高度与父容器高度继承；Grid用grid-auto-rows:1fr最可靠，Flex需结构分层+内部弹性+完整高度链。
卡片尺寸不统一，根本不是“没写 width/height”的问题，而是盒模型行为没被约束——flex 或 grid 的拉伸逻辑、内容自然高度、父容器高度继承这三者没对齐，就会导致视觉错位。
为什么设了 width 和 height 还是不等高
直接给 .card 写 height: 300px 看似简单，但会截断长文本、撑爆图片、破坏响应式；而只写 width: 280px 又不管高度，卡片依然参差。真正起作用的是「高度上下文」：父容器是否提供可拉伸的空间，子元素是否允许被拉伸。
-
align-items: stretch（Flex 默认值）只在父容器有明确高度（min-height或height）时才生效 - 卡片内部若用了
position: absolute、float或display: inline-block，会脱离 flex 流程，失去拉伸能力 - 子元素写了
height、min-height或align-self: flex-start，会覆盖 stretch 行为
用 Grid 实现跨行等高最省心
CSS Grid 天然支持列内所有卡片按最高项对齐，不用 JS 计算，也不依赖内容撑开。关键不是列数，而是 grid-auto-rows：
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-auto-rows: 1fr; /* ✅ 所有行轨道等高 */
gap: 1.5rem;
}
-
grid-auto-rows: 1fr比minmax(300px, 1fr)更可靠——它强制每行卡片共享同一高度基准，哪怕某张卡只有标题，也会被拉到和最高卡一致 - 不需要给单个
.card设height或min-height，避免内容溢出或留白过大 - 兼容性足够：Chrome 66+、Firefox 63+、Safari 16.4+、Edge 79+ 均支持
Flex 布局下怎么让卡片视觉等高
Flex 本身不跨行协调高度，但可以靠「结构分层 + 内部弹性」模拟等高效果，适合动态列数或需 JS 排序的场景：
- 给
.card设display: flex; flex-direction: column; min-height: 320px（值按设计稿定） - 卡片内容区（如
.card-body）加flex: 1，让它吃掉剩余空间，压制文本高度差异 - 底部按钮用
margin-top: auto锚定，而非position: absolute—— 后者会让卡片实际高度不可控 - 图片统一加
object-fit: cover; aspect-ratio: 16/9，fallback 用padding-top: 56.25%配合绝对定位占位
文字截断和图标对齐才是隐藏雷区
很多人调好了卡片高度，结果标题换行、图标飘移、按钮错位——这些都不是尺寸问题，而是垂直对齐失控：
- 标题区域要等高，不能只靠
line-clamp截断，得配合.card-header { flex-grow: 1 }和父容器height: 100% - 图标/按钮统一锚定底部，必须是
.card的直接子元素，且.card是flex-column，否则margin-top: auto不生效 - 别用
margin-bottom: 20px强制卡片底部对齐来“假装等高”——它只是视觉欺骗，卡片真实高度仍不同，hover 动效或 JS 获取offsetHeight时会出错
真正统一尺寸，不是把所有卡片塞进同一个 height 数值里，而是让它们共享同一套拉伸规则和内容约束逻辑。Grid 的 grid-auto-rows: 1fr 是最接近“开箱即用”的解法，Flex 则需要更谨慎地控制每一层的高度继承链——漏掉任何一个环节，比如忘了给父容器设 min-height，整个等高体系就塌了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
