Responsive Pure CSS Masonry Layout

masonry.css

/* Masonry grid */
.masonry {
  transition: all .5s ease-in-out;
  column-gap: 10px;
  column-fill: initial;
}

/* Masonry item */
.masonry .brick {
  vertical-align: top; /* Keep the item on the very top */
  width: 100%;
}

/* Masonry image effects */
.masonry .brick img {
  transition: all .5s ease-in-out;
  backface-visibility: hidden; /* Remove Image flickering on hover */
  width: 100%;
  margin-top: 10px;
  max-height: 900px;
  min-height: 180px;
}

.masonry .brick:hover img {
  opacity:1;
}

/* Gutterless masonry */
.masonry.gutterless {
  column-gap: 0;
}

.masonry.gutterless .brick {
  margin-bottom: 0;
}

/* Masonry on tablets */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .masonry {
    column-count: 2;
  }
}
@media only screen and (min-width: 990px){
  .masonry {
    column-count: 2;
  }
}

/* Masonry on big screens */
@media only screen and (min-width: 1024px) {
  .desc {
    font-size: 1.25em;
  }

  .intro {
    letter-spacing: 1px;
  }

  .masonry {
    column-count: 3;
  }
}
/* Detail gallery end */

masonry.html

  <div class="masonry">
         <div class="brick">
            <img src="https://placekitten.com/200/287" class="img-fluid " alt="">
         </div>
    
         <div class="brick">
            <img src="https://placekitten.com/200/140" class="img-fluid " alt="">
         </div>
    
         <div class="brick">
            <img src="https://placekitten.com/200/139" class="img-fluid " alt="">
         </div>
    
         <div class="brick">
            <img src="https://placekitten.com/408/287" class="img-fluid " alt="">
         </div>
        
        <div class="brick">
            <img src="http://placekitten.com/500/200" class="img-fluid " alt="">
         </div>
  </div>