#StackBounty: #css create a responsive grid where the elements occupy the available space to be located according to their size

Bounty: 50

With this code, I get the following result:

enter image description here

I want to know how I can make the container > divs fit into the available space, just like in this image:

enter image description here

how can I do it?

.container{
  display:flex;
  flex-wrap:wrap;
  border:3px solid black;
}

.container > div{
  margin:5px 15px;
}

.son1{
  border:1px solid red;
  width:400px;
  height:400px;
}

.son2{
  border:1px solid blue;
  width:250px;
  height:220px;
}

.son3{
  border:1px solid blue;
  width:200px;
  height:270px;
}
<div class="container">
    <div class="son1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum cum totam voluptates, molestias aliquid quod, placeat harum inventore assumenda sed itaque perferendis eligendi tempore ullam, incidunt qui. Hic, recusandae, iste.
  
  </div>
  <div class="son2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam porro, aperiam facilis, optio illum molestiae. Doloribus, dolores numquam voluptatum at quae ducimus pariatur! Esse ullam facere aperiam veniam error tempora!
  </div>
  <div class="son3">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, dicta porro quia. Sed error nulla ratione temporibus, blanditiis aspernatur suscipit ipsum, odit expedita libero hic, asperiores eveniet adipisci quisquam labore!
  </div>
  
  <div class="son3">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, dicta porro quia. Sed error nulla ratione temporibus, blanditiis aspernatur suscipit ipsum, odit expedita libero hic, asperiores eveniet adipisci quisquam labore!
  </div>
  
</div>

NOTE: this is my real problem, with this example I know that I can solve my problem

enter image description here


Get this bounty!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.