CSS Grid with uneven rows (Pinterest style)

Question

I'm trying to create a grid of links (img + text) that will be 3 columns and multiple rows. The problem is that my images are not the same height, so I'm getting a result like this:

I'm trying to find what CSS Grid property I need to get a result like this.

I tried to just do 3 divs (for each column) with multiple links inside them, but the order isn't correct when responsive.

Can you guys help? Thanks a lot.

Answer 1

This is some simple CSS you can add to your grid to make it work:

overflow: hidden,
display: inline-block,
background: cover

Answer 2

I guess, you can put display: flex to parent div And then in each column add number of images you want to render

<div class='parent'>
  <div class='column'>
    <img src='/img-1' />
    <img src='/img-4' />
    <img src='/img-7' />
  </div>
  <div class='column'>
    <img src='/img-2' />
    <img src='/img-5' />
    <img src='/img-8' />
  </div>
  <div class='column'>
    <img src='/img-3' />
    <img src='/img-6' />
    <img src='/img-9' />
  </div>
</div>

Now you don't have to worry about the different image heights.