CSS Grid布局如何实现带绿色背景的卡片页脚等高、内容高度统一

问题说明 #

需要实现两类统一效果：

• 所有卡片的绿色背景页脚总高度完全一致
• 页脚内部的内容排版位置、各区域高度保持完全对齐

效果复现说明 #

• 当前未优化状态：不同卡片因正文内容长度差异，页脚被撑开的高度参差不齐，短内容卡片的页脚高度明显低于长内容卡片
• 目标优化状态：所有卡片页脚处于同一垂直位置，总高度完全匹配，页脚内部的标题、正文排版位置无错位
• 代码可在CodePen在线环境复现当前未优化状态

现有代码结构 #

原生HTML结构 #

<div class="cards">
  <div class="card">
    <div>Long...<br><br><br>content</div>
    <div class="card-footer">
      <h3>Footer title</h3>
      <div>Long...<br><br>footer text</div>
    </div>
  </div>
  <div class="card">
    <div>Shorter content</div>
    <div class="card-footer">
      <h3>Footer title</h3>
      <div>Short footer text</div>
    </div>
  </div>
</div>

未优化的CSS样式 #

.cards {
  width: 600px;
  column-gap: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.card {
  background-color: lightgrey;
  display: grid;
  grid-template-rows: 1fr auto auto;
}
.card-footer {
  background: lightgreen;
}

核心原因分析 #

现有代码的布局逻辑存在跨容器高度不共享的问题：

• .cards网格容器虽然让同排卡片自动拉伸到统一高度，但.card内部的网格行计算仅在单个卡片容器内部生效
• 单个卡片的页脚是内部独立的grid行，高度完全由自身内容撑开，没有跨卡片的高度对齐基准，因此会出现正文内容长的卡片页脚更高、正文短的卡片页脚更矮的错位情况

具体实现步骤 #

1. 调整.cards网格容器的对齐规则，明确让所有子项卡片自动拉伸到网格分配的统一高度，保证同排卡片等高
2. 将.card从内部grid布局改为纵向flex布局，让正文区域自动占满除页脚外的所有剩余空间，保证页脚始终被推到卡片最底部
3. 给.card-footer设置统一的最小高度基准，同时通过统一的内边距、内部flex排版规则，保证页脚内部的标题、正文区域的间距和位置完全一致

调整后的完整CSS代码如下：

.cards {
  width: 600px;
  column-gap: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /* 保证同排卡片自动拉伸为等高 */
  align-items: stretch;
}
.card {
  background-color: lightgrey;
  /* 改为纵向flex布局，更方便分配内部空间 */
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 卡片正文区域自动占满剩余空间 */
.card > div:first-child {
  flex: 1 1 auto;
}
.card-footer {
  background: lightgreen;
  /* 统一页脚最小高度，避免内容短的页脚过度收缩 */
  min-height: 120px;
  /* 统一内边距，保证内部排版位置一致 */
  padding: 16px;
  /* 页脚内部改为纵向flex布局，统一元素间距 */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

完成以上调整后，无论卡片正文内容长度是多少，所有卡片都会保持统一等高，页脚全部对齐到卡片底部，同时所有页脚的总高度、内部排版位置完全匹配预期效果。 #

内容的提问来源于stack exchange，提问作者Ozgur Yasin Aydin