Multiple equal row height in CSS Grid Layout

Question

How can I make all footers (with green background) same height, keeping content height also the same, too?

Current output:

Desired output:

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

Currently there is no way of doing that with pure css unless you have a specific height to the card-footer. You would have to run a EQ columns javascript to set the height on the `.card-footer` based on the item with the heights height. — Dejan.S, Feb 16 '21 at 19:43
Thank you for your answer. I've also checked the referred question (https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks). I am open to any workarounds, as long as they don't use JavaScript and they're multibrowser compatible. — Ozgur Yasin Aydin, Feb 16 '21 at 19:52
It doesn't. Commented below there (https://stackoverflow.com/questions/66231096/multiple-equal-row-height-in-css-grid-layout?noredirect=1#comment117095653_66231213). — Ozgur Yasin Aydin, Feb 16 '21 at 21:10
BTW, for now I went with giving a static height to the footer, for now. I didn't want to use Javascript or any hacky ways, so I went with it. — Ozgur Yasin Aydin, Feb 17 '21 at 15:28

DCR · Answer 1 · 2021-02-16T22:55:26.077

0

.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>

edited Feb 16 '21 at 22:55

answered Feb 16 '21 at 19:49

DCR

14,737
12
52
115

Looks great at first but it doesn't work for me, because it's doesn't work well in responsive: it keeps the top rows and bottom rows separate from each other. (Without creating a second copy of all boxes - which I don't want to do that way). – Ozgur Yasin Aydin Feb 16 '21 at 21:10
updated snippet to make it responsive – DCR Feb 16 '21 at 22:55
Sorry for not being clear. What I meant is, in the page I'm working at, in mobile view, those boxes will be single column, one after another, not 2 columns. – Ozgur Yasin Aydin Feb 17 '21 at 15:27

Multiple equal row height in CSS Grid Layout

1 Answers1