Responsive matching height of grid element parts

Question

I build a grid where the grid elements have an image, a title, a short text and a button. Here is an example.

As you can see, the images have bit of different height, also some titles and text are shorter/longer. I'm looking for a CSS/Vanilla JS solution which aligns the height of the images/titles/etc responsively for the row.

The result should be something like this:

So every image wrapper has the same height, the titles starts on the same position, the buttons are also aligned, etc.

This can't be CSS min-height, because the data source is dynamic and I don't know what I'll get. It must be responsive, work with 2/3/4/5 elements in a row. Also tried masonry, but didn't like it.

I tried to dig a bit and was able to match the height of the cards but not the parts of the cards.

Any suggestion would be appreciated.

the easiest way is to include a container that wraps the image and gives it a specific height while using `object-fit` to handle the image to the container size. The rest should solve itself if all images have the same height. — tacoshy, Jul 17 '23 at 08:10
each card (image, title, button) inside your outer grid can be a grid. This grid card has 1 column, 3 rows. First row with image let say 50% height. Last row for the button, let say 5%. So you'll have something like grid-template-rows: 50% 1fr 5%. — pier farrugia, Jul 17 '23 at 08:30
"*[Could] you provide a minimum reproducible example in a snippet?*" - I'd ask the same of you, can you share your current HTML, and CSS, so that we all have a common base to work from that doesn't require each of us to create the entirety of your images? — David Thomas, Jul 17 '23 at 08:58

Alexander Nenashev · Answer 1 · 2023-07-17T08:46:34.787

You can use any layout system you like to get the same height for the cards (flexbox or grid), set the image width to 100% and pin the button to the bottom with absolute positioning:

* {
  box-sizing:border-box;
  color: #aaa;
}
body{
  background:#222;
  font-family:arial;
}
.container{
  display:flex;
  gap: 16px;
}
.card{
  flex: 1 1 0;
  --padding: 16px;
  --button-height: 32px;
  position: relative;
  background:#333;
  border-radius:4px;
  padding:var(--padding);
  padding-bottom: calc(var(--padding) * 2 + var(--button-height));
}
.card img{
  width:100%;
  margin-bottom:var(--padding);
  border-radius:3px;
}
.card button{
  white-space:nowrap;
  background: #444;
  padding: 0 16px;
  height:var(--button-height);
  line-height:var(--button-height);
  position:absolute;
  bottom:var(--padding);
  left: var(--padding);
  border:none;
}

<div class="container">
<div class="card">
<img src="https://www.searchenginejournal.com/wp-content/uploads/2022/06/image-search-1600-x-840-px-62c6dc4ff1eee-sej-760x400.webp">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus, nunc in rhoncus elementum, turpis arcu fringilla ex, ac convallis diam nulla accumsan enim. Phasellus at sodales ex. Ut at tellus eu ex tincidunt consequat. Sed turpis ante, imperdiet et convallis auctor, gravida vel ipsum. Mauris ultricies blandit ligula a accumsan.
<button type="button">Read more</button>
</div>
<div class="card">
<img src="https://media.istockphoto.com/id/494178673/ru/%D1%84%D0%BE%D1%82%D0%BE/shes-got-%D0%B2%D1%81%D0%B5-%D0%B5%D0%B9.jpg?s=1024x1024&w=is&k=20&c=e2TdF3_X5gYRxPG5_uhv83hG2HbbSLKDSTUP0yfflqA=">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus, nunc in rhoncus elementum, turpis arcu fringilla ex, ac convallis diam nulla accumsan enim. Phasellus at sodales ex. Ut at tellus eu ex tincidunt consequat. Sed turpis ante, imperdiet et convallis auctor, gravida vel ipsum. Mauris ultricies blandit ligula a accumsan.
<button type="button">Read more</button>
</div>
<div class="card">
<img src="https://media.istockphoto.com/id/184195134/ru/%D1%84%D0%BE%D1%82%D0%BE/%D1%81%D1%82%D1%83%D0%B4%D0%B5%D0%BD%D1%82-%D0%B4%D0%B5%D0%B2%D1%83%D1%88%D0%BA%D0%B0-%D1%81-%D0%BA%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80%D0%B0-%D0%B2-%D1%88%D0%BA%D0%BE%D0%BB%D0%B5.jpg?s=1024x1024&w=is&k=20&c=_5nvP0A61Z381iy6RUWUrYNK0abzKM9sqzNmKo9HGRg=">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus, nunc in rhoncus elementum, turpis arcu fringilla ex, ac convallis diam nulla accumsan enim. Phasellus at sodales ex. Ut at tellus eu ex tincidunt consequat.
<button type="button">Read more</button>
</div>
</div>

Responsive matching height of grid element parts

1 Answers1