卡片高度不一致是CSS流式布局的正常表现，应通过grid的minmax()或flex的min-height配合弹性布局控制可变区域，而非固定height；需结合响应式断点分层约束标题行数、描述行数及卡片最小高度。
卡片高度不一致是因为内容长度不同
移动端卡片（比如商品卡片、文章摘要）常因标题行数、描述字数、图片比例差异，导致 height 自动撑开不一致。这不是 bug，是 CSS 默认流式布局的正常表现——但视觉上会显得参差不齐，影响排版节奏。
关键不是强行设死 height（会截断内容或留白），而是用响应式手段控制「可变区域」的伸缩行为。
用 display: grid + minmax() 控制行高
Grid 是目前最可控的方案，尤其适合等高卡片网格。重点在于把卡片内部结构拆成可约束的轨道：
-
grid-template-rows明确划分标题、内容、操作区，用minmax(0, 1fr)让中间内容区弹性收缩（0防止溢出，1fr允许撑满剩余空间） - 标题和底部按钮用固定或
min-content，避免它们拉伸整张卡片 - 配合
overflow: hidden和text-overflow: ellipsis处理超长文本
.card-grid {
display: grid;
grid-template-rows: min-content minmax(0, 1fr) min-content;
gap: 12px;
}
.card-title {
font-size: 16px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-desc {
font-size: 14px;
line-height: 1.5;
margin-top: 8px;
/ 这里不设高度，靠 grid 轨道约束 /
}
用 flex + align-items: stretch 搭配 min-height
如果必须用 Flex 布局（比如卡片是 flex 容器的子项），需注意：align-items: stretch 默认生效，但前提是父容器有明确高度或子项未设 height。常见失效原因：
立即学习“前端免费学习笔记（深入）”；
- 卡片内某个元素（如图片）设了
height: 100%，但父级没给高度上下文 - 用了
flex-direction: column却忘了给卡片设min-height基线 - 文字溢出后触发
min-height失效（需加overflow: hidden）
稳妥做法是给卡片设一个基于视口的最小高度，再让内容区 flex 占满：
.card {
display: flex;
flex-direction: column;
min-height: 180px; /* 根据设计稿调整，建议用 rem 或 vw */
}
.card-body {
flex: 1;
padding: 12px 0;
}
.card-footer {
margin-top: auto; / 推到底部，不随内容增长 /
}
响应式断点下重置轨道/间距更可靠
单纯在所有屏幕用同一套 grid 轨道容易在小屏（如 iPhone SE）出现文字过挤或空白过大。应该按设备宽度分层处理：
- ≤ 375px：标题限 1 行，描述限 2 行，卡片整体
min-height: 160px - 376px – 480px：标题放宽到 2 行，描述 3 行，
min-height: 190px - ≥ 481px：启用完整三行轨道，允许描述弹性伸缩
别用像素硬写断点，优先用 em 或 rem（比如 @media (max-width: 30em)），这样适配缩放字体时更稳定。
真正难的不是让高度“看起来一样”，而是让不同内容量的卡片在各种尺寸下都保持呼吸感和信息完整性——多一层 minmax()，少一行 height: 200px，差别就在这里。
