在Flexbox及Grid布局中实现卡片Footer高度统一

AI 小北

2026-8-10

我有一组卡片布局，每张卡片包含内容区域（content）与footer元素，内容区和footer内的文本长度均不固定。目前已通过Grid布局实现卡片整体高度一致，但各卡片的footer高度存在差异，需要让所有footer保持相同高度。当前实现代码如下：

原CSS代码

section {
  width: 90%;
    max-width: 700px;
    border: 1px solid #4D4E53;
    border-radius: 2px;
    padding: 10px 14px 10px 10px;
    margin-bottom: 10px;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    grid-gap: 10px;
}

.card {
  display: flex;
  flex-direction: column;
    border: 2px solid rgb(96, 139, 168);
    border-radius: 5px;
}

.card .content {
  flex: 1 1 auto;
  padding: 10px;
  object-fit:contain;
  //min-height:0;
}

footer {
    background-color: rgba(96, 139, 168, .2);
    padding: 10px;
      display: block;
  flex: auto;
}

原HTML代码

<html>
  <head>
  </head>
  <body>
    <section>
<div class="cards">
  <div class="card">
    <div class="content">
      <p>This card doesn't have much content.</p>
    </div>
    <footer>Card footer</footer>
  </div>
  <div class="card">
    <div class="content">
      <p>This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.</p>
    </div>
    <footer>Longer card footer - text wraps onto thte next line</footer>
  </div>
  <div class="card">
<div class="content">
  <p>This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.</p>
</div>
<footer>Card footer</footer>
  </div>
</div>
    </section>
  </body>
</html>

解决方案

要让所有footer高度统一，只需调整.card的布局方式，利用Grid的行高自动对齐特性：

修改后的CSS代码

section {
  width: 90%;
  max-width: 700px;
  border: 1px solid #4D4E53;
  border-radius: 2px;
  padding: 10px 14px 10px 10px;
  margin-bottom: 10px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px;
}

.card {
  display: grid;
  grid-template-rows: 1fr auto; /* 内容区占满剩余高度，footer行自动匹配最高高度 */
  border: 2px solid rgb(96, 139, 168);
  border-radius: 5px;
}

.card .content {
  padding: 10px;
}

footer {
  background-color: rgba(96, 139, 168, .2);
  padding: 10px;
}

修改说明

将.card从flex布局改为grid布局，通过grid-template-rows: 1fr auto定义两行：第一行（content）会占满卡片的剩余可用高度，第二行（footer）的高度由该行中最高的footer内容决定，从而实现所有footer高度统一。
移除了.content和footer上的flex相关属性，因为不再需要flex来分配空间。

修改后的HTML代码（无需改动，直接复用原代码即可）

<html>
  <head>
  </head>
  <body>
    <section>
<div class="cards">
  <div class="card">
    <div class="content">
      <p>This card doesn't have much content.</p>
    </div>
    <footer>Card footer</footer>
  </div>
  <div class="card">
    <div class="content">
      <p>This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.</p>
    </div>
    <footer>Longer card footer - text wraps onto thte next line</footer>
  </div>
  <div class="card">
<div class="content">
  <p>This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.</p>
</div>
<footer>Card footer</footer>
  </div>
</div>
    </section>
  </body>
</html>

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