CSS网格布局中的多个相等行高[重复]答案

【问题标题】：Multiple equal row height in CSS Grid Layout [duplicate]CSS网格布局中的多个相等行高[重复]
【发布时间】：2021-05-19 16:49:57
【问题描述】：

如何使所有页脚（绿色背景）的高度相同，同时保持内容高度也相同？

当前输出：

期望的输出：

CodePen： https://codepen.io/yasincad/pen/poNPgYv

当前 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;
}

【问题讨论】：

目前没有办法用纯 css 做到这一点，除非你对卡片页脚有特定的高度。您必须运行 EQ 列 javascript 以根据具有高度的项目在 .card-footer 上设置高度。
感谢您的回答。我还检查了提到的问题 (stackoverflow.com/questions/56711501/…)。我愿意接受任何变通方法，只要它们不使用 JavaScript 并且与多浏览器兼容。
下面的答案不适合你吗？
它没有。在下方评论 (stackoverflow.com/questions/66231096/…)。
顺便说一句，现在我先给页脚一个静态高度。我不想使用 Javascript 或任何 hacky 方式，所以我选择了它。

标签： html css flexbox css-grid grid-layout

【解决方案1】：

.cards {
  width: 83vw;
  column-gap: 3vw;
  display: flex;
 
}
.card {
  background-color: lightgrey;
  width:40vw;
 
}
.card-footer {
  background: lightgreen;
  width:40vw;
}

<div class="cards">
  <div class="card">
    <div>Long...<br><br><br>content</div>
    
  </div>
  <div class="card">
    <div>Shorter content</div>
    
  </div>
</div>


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

【讨论】：

一开始看起来不错，但它对我不起作用，因为它在响应方面效果不佳：它使顶行和底行彼此分开。（不创建所有框的第二个副本 - 我不想那样做）。
更新了 sn-p 以使其响应
抱歉不清楚。我的意思是，在我正在处理的页面中，在移动视图中，这些框将是单列，一个接一个，而不是 2 列。