如何让相邻卡片在不同屏幕尺寸下保持等高？

核心思路 #

你当前使用Grid布局，它本身就支持让同一网格行内的列自动匹配最高高度。问题出在卡片内容区域用了固定min-height，且没有让卡片容器充分利用网格列的高度。只需调整几个CSS属性就能彻底解决，无需编写大量媒体查询。

具体修改方案 #

1. 将卡片容器设为垂直方向的Flex容器，确保它能占满父网格列的高度：

.vertical-overlap-card {
  margin-bottom: 20px;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
}

2. 移除卡片内容区域的min-height，改用flex-grow: 1让它自动填充卡片剩余空间：

.vertical-overlap-card-body {
  background-color: #fff;
  display: flex;
  padding: 6rem 50px 0; /* 合并冗余的padding声明 */
  flex-grow: 1;
}

3. 让卡片内部的内容容器也能充分利用空间，确保文本区域可自动扩展：

.vertical-overlap-card-body .container {
  flex-grow: 1;
}

修改后的完整关键CSS片段 #

/* 覆盖原有样式 */
.vertical-overlap-card {
  margin-bottom: 20px;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
}

.vertical-overlap-card-body {
  background-color: #fff;
  display: flex;
  padding: 6rem 50px 0;
  flex-grow: 1;
}

.vertical-overlap-card-body .container {
  flex-grow: 1;
}

原方法无效的原因 #

• flex-grow: 1没作用：因为你没有将vertical-overlap-card设置为Flex容器，内容区域没有可拉伸的父容器空间。
• height: 100%占满页面：Grid列高度默认由内容决定，没有明确的高度值，height:100%会向上继承到html/body，导致占满整个视口。

修改后，无论卡片内文本长度如何变化，同一网格行的卡片都会自动匹配最高高度，适配所有屏幕尺寸，无需再维护媒体查询。

内容的提问来源于stack exchange，提问作者canijusttravel