How do I ensure all footers with a green background have the same height, while also keeping the content height consistent?
Current result:
https://i.sstatic.net/SrgFq.png
Desired output:
https://i.sstatic.net/4cr25.png
CodePen: https://codepen.io/yasincad/pen/poNPgYv
Current 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>
Current 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;
}