1

I am using flex-wrap for responsiveness. But there is a considerable gap between first-row and second-row items. The height of the items will be dynamic. it will depend on the content of the item. The number of items is also dynamic

This is what I am looking for (Expected Output)

this is what i want to acheive

Currently, this is what I have. 

this is what i have right now

Here are my HTML and CSS code snippet to demonstrate what I have done.

body{
  display:block;
  padding: 5px;
}

.container{
  background: #f8f9fa;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: start;
  width: 100%;
  padding: 10px;
  gap:10px;
}

.item1{
  width: 250px;
  height: 100px;
  background: #a5bdb5;
  border-radius: 5px;
}

.item2{
  width: 250px;
  height: 150px;
  background: #a5bdb5;
  border-radius: 5px;
}

.item3{
  width: 250px;
  height: 250px;
  background: #a5bdb5;
  border-radius: 5px;
}

.item4{
  width: 250px;
  height: 50px;
  background: #a5bdb5;
  border-radius: 5px;
}

.item5{
  width: 250px;
  height: 130px;
  background: #a5bdb5;
  border-radius: 5px;
}
<html>
  <body>
    <div class="container">
      <div class="item1">
      </div>
      <div class="item2">
      </div>
      <div class="item3">
      </div>
      <div class="item4">
      </div>
      <div class="item5">
      </div>
    </div>
  </body>
</html>

if this is not possible with flex then what else i can do to achieve this?

Rutik Patel
  • 183
  • 3
  • 15
vishnu.k
  • 31
  • 4
  • 2
    This called **masonry layout**. Search for it and you will find a lot of CSS/JS libraries that is easy and ready to use. – vee Jan 16 '23 at 04:42
  • You may consider using the plain old CSS `columns` structure. Check out [MDN: columns](https://developer.mozilla.org/en-US/docs/Web/CSS/columns). I create [a little demo](https://codepen.io/renevanderlende/pen/WNKZbzj) using your code. – Rene van der Lende Jan 17 '23 at 01:37

0 Answers0