Masonry js

Masonry is a JavaScript grid layout library.it is used for image grid layout
include jquery and masonry js library in head section.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>


// copy and past css in head section or style.css

<style type="text/css">

.grid-header {
  text-align: center;
}

.grid {
  margin: 1rem auto;
  &-item {
    width: 250px;
    height: auto;
    margin-bottom: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

// copy and paste js before closing tag or script.js and include script.js

<script>
var colWidth = $(".grid-item").width();

window.onresize = function(){
  var colWidth = $(".grid-item").width();
}
console.log(colWidth);

var $grid = $(".grid").masonry({
  // options
  itemSelector: ".grid-item",
  columnWidth: ".grid-item",
  // percentPosition: true,
  gutter: 10,
  fitWidth: true
});

$grid.imagesLoaded().progress(function() {
  $grid.masonry("layout");
});

</script>

Html code here:

<div class="grid">
  <div class="grid-item"><img src="https://placeimg.com/640/480/animals"></div>
  <div class="grid-item"><img src="https://placeimg.com/640/300/arch"></div>
  <div class="grid-item"><img src="https://placeimg.com/640/480/nature"></div>
  <div class="grid-item"><img src="https://placeimg.com/640/500/people"></div>
  <div class="grid-item"><img src="https://placeimg.com/640/700/tech"></div>
  <div class="grid-item"><img src="https://placeimg.com/640/480/arch"></div>
  <div class="grid-item"><img src="https://placeimg.com/640/480/tech"></div>
  <div class="grid-item"><img src="https://placeimg.com/640/640/nature"></div>
  <div class="grid-item"><img src="https://placeimg.com/640/800/animals"></div>
</div>