0

I am building a listing page where I have multiple cards

each of them will have a different height

I would like to control columns with a CSS grid.

the issue is that all elements in one row take a height of the highest item in this row

image

is there any way to remove this space?

my code:

<div class="cards">
  <div class="cards__items">
    <div class="cards__items--item">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores earum  enim eum in consectetur veritatis consequuntur. Doloribus fuga ipsum nisi eos ullam esse saepe quo ex aliquid enim eum in consectetur veritatis consequuntur. Doloribus fuga ipsum nisi eos ullam esse saepe quo ex aliquid enim eum in consectetur veritatis consequuntur. Doloribus fuga ipsum nisi eos ullam esse saepe quo ex aliquidnostrum exercitationem nam enim eum in consectetur veritatis consequuntur. Doloribus fuga ipsum nisi eos ullam esse saepe quo ex aliquid!
       enim eum in consectetur veritatis consequuntur. Doloribus fuga ipsum nisi eos ullam esse saepe quo ex aliquid</p>
      <img src="//unsplash.it/500/500" />
    </div>
    
    <div class="cards__items--item">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores earum nostrum exercitationem nam enim eum in consectetur veritatis consequuntur. Doloribus fuga ipsum nisi eos ullam esse saepe quo ex aliquid!</p>
      <img src="//unsplash.it/500/500" />
    </div>
    
    
    <div class="cards__items--item">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores earum nostrum exercitationem nam enim eum in consectetur veritatis consequuntur. Doloribus fuga ipsum nisi eos ullam esse saepe quo ex aliquid! enim eum in consectetur veritatis consequuntur. Doloribus fuga ipsum nisi eos ullam esse saepe quo ex aliquid enim eum in consectetur veritatis consequuntur. Doloribus fuga ipsum nisi eos ullam esse saepe quo ex aliquid enim eum in consectetur veritatis consequuntur. Doloribus fuga ipsum nisi eos ullam esse saepe quo ex aliquid</p>
      <img src="//unsplash.it/500/500" />
    </div>
    
    
    
    <div class="cards__items--item">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores earum nostrum exercitationem nam enim eum in consectetur veritatis consequuntur. Doloribus fuga ipsum nisi eos ullam esse saepe quo ex aliquid!</p>
      <img src="//unsplash.it/500/500" />
    </div>
    
    
  </div>
</div>

my css:

.cards {
     max-width: 800px;
     margin: 0 auto;
}
 .cards__items {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
}
 .cards__items--item {
     border: 1px solid red;
     height: max-content;
}
 .cards__items--item img {
     width: 100%;
     max-height: 200px;
     height: 100%;
     object-fit: cover;
}

Codepen link

B.Ch.
  • 190
  • 10
  • 1
    That's called a masonry layout and it's a little more complicated than that. If the order of the elements is not important you can just use columns and place the elements one after the other inside of them. However, if the order is important, you'll have to user javascript for it, there's a neat plugin called masonry. There's a css-only way of doing it coming but for now it's mostly unsupported. More info https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/ – Jonas Grumann Apr 07 '22 at 08:53

0 Answers0