使用Flexbox或Grid可实现响应式等高卡片布局。1. Flexbox通过display: flex和flex: 1 1 300px使子项自动等高并适配屏幕；2. Grid利用grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))创建自适应网格，结合gap控制间距；3. 为保持按钮对齐底部，给.card设flex-direction: column，.card-content用flex: 1，.card-button加margin-top: auto；4. 推荐Grid处理整体网格，Flexbox优化内部结构，兼顾响应性与布局控制。
实现响应式多列卡片且保持等高，关键是使用现代布局方式——CSS Flexbox 或 Grid。它们能自动处理高度对齐问题，并适配不同屏幕尺寸。
使用 Flexbox 实现等高卡片
Flexbox 是最常用的方法，父容器设置为 flex 后，子项默认会拉伸到相同高度。
示例代码：.card-container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
gap: 16px; /* 卡片间距 */
}
<p>.card {
flex: 1 1 300px; /<em> 自适应宽度，最小300px </em>/
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
说明：
- flex: 1 1 300px 表示每个卡片弹性增长、收缩，最小宽度 300px，适合响应式。
- 所有 .card 在同一行中会自动等高，即使内容不同。
使用 CSS Grid 更灵活控制
Grid 布局更适合复杂网格，也能轻松实现等高效果。
示例代码：.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
}
<p>.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
}
说明：
- auto-fit + minmax(300px, 1fr) 自动调整列数，每列至少 300px。
- 给 .card 加上 display: flex + flex-direction: column 可进一步控制内部内容对齐，比如让按钮始终在底部。
处理内容不对齐的小技巧
当卡片内有标题、描述、按钮时，想让按钮统一到底部：
立即学习“前端免费学习笔记（深入）”；
- 给 .card 设置 display: flex; flex-direction: column;
- 给内容区域加 flex: 1 占据剩余空间
.card-content {
flex: 1;
}
<p>.card-button {
margin-top: auto; /<em> 推到底部 </em>/
}
基本上就这些。用 Flexbox 或 Grid 都能轻松实现响应式等高卡片，推荐优先使用 Grid 处理网格结构，Flexbox 控制内部布局。不复杂但容易忽略细节。
