如何实现响应式CSS卡片布局：同行卡片各区域高度对齐

直接用CSS Grid嵌套布局就能解决所有问题，无需繁琐的媒体查询，核心思路是外层Grid控制卡片的响应式排列，内层Grid控制卡片内部三个区域的对齐逻辑：

核心实现代码 #

HTML结构 #

<div class="card-container">
  <div class="card">
    <div class="card-top">这是一段长度可变的顶部文本，可能会换行好几行</div>
    <div class="card-middle">
      <p>中部元素高度可变，比如这里是一段较长的内容，用来撑开高度</p>
      <p>再多几行测试高度</p>
    </div>
    <div class="card-bottom">底部单行文本</div>
  </div>
  <div class="card">
    <div class="card-top">短文本</div>
    <div class="card-middle">
      <p>短内容</p>
    </div>
    <!-- 无底部文本 -->
  </div>
  <div class="card">
    <div class="card-top">中等长度的顶部文本，刚好一行或者两行</div>
    <div class="card-middle">
      <img src="https://picsum.photos/200/300" alt="示例图片">
    </div>
    <div class="card-bottom">另一个底部文本</div>
  </div>
</div>

CSS样式 #

.card-container {
  display: grid;
  /* 响应式列：最小280px，自动填充剩余空间，超过宽度自动换行 */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem; /* 卡片间距 */
  padding: 1rem;
}

.card {
  display: grid;
  /* 内部区域分配：顶部自适应高度，中部占满剩余空间，底部自适应 */
  grid-template-rows: auto 1fr auto;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 1rem;
}

.card-top {
  margin-bottom: 1rem;
  font-weight: bold;
}

.card-middle {
  margin-bottom: 1rem;
}

.card-bottom {
  /* 确保底部文本单行显示 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #666;
}

关键逻辑说明 #

• 外层.card-container用repeat(auto-fit, minmax(280px, 1fr))实现响应式列：屏幕足够宽时自动排列多列，宽度不足时自动换行，最终会变成单列布局，完全适配不同屏幕。
• 内层.card用grid-template-rows: auto 1fr auto：
  • auto：顶部区域高度随文本内容自动调整，同行卡片的顶部会自然对齐；
  • 1fr：中部区域占满卡片剩余高度，确保同行卡片的中部区域底部对齐；
  • auto：底部区域仅在有内容时占用高度，无内容时不占空间，不会产生多余空白。
• 同行卡片的高度会自动被Grid拉平成该行最高卡片的高度，无需额外设置固定高度或JS干预。

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