0

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:enter image description here

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

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.

Borisonekenobi
  • 469
  • 4
  • 15
VL Design
  • 9
  • 2

2 Answers2

-2

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

overflow: hidden,
display: inline-block,
background: cover
Borisonekenobi
  • 469
  • 4
  • 15
براق فلاح كاظم
  • 1
  • 1
-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.

Alif Haider
  • 128
  • 1
  • 7
  • The problem is the same with CSS grid: It works but when responsive, I only have 1 column. So the order of elements is wrong because it shows the entire 1st column, then the 2nd, etc... I want to show the first element of each column first when responsive. – VL Design Jul 14 '23 at 10:23