CSS grid with uneven rows (Pinterest style)

Question

I'm trying to create a 3 column multiple row grid of links (img text). The problem is that my images are not the same height, so I get results like this:

I'm trying to find what CSS grid properties are needed to get a result like this.

I tried just making 3 divs (per column) with multiple links in them, but the order was not correct when responding.

Can you help? Thank you so much.

Answer 1

I think, you can put display: flex in the parent div Then add in each column the number of images 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 images having different heights.