PHP

<!--<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>-->
<!-- Step 2: Then load imagesloaded. imagesloaded makes sure the images are not displayed until they are fully loaded -->
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

<!-- Step 3: we load masonry -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

CSS

.grid {
  text-align: center;
  max-width: 95vw;
}
.grid-item {
  padding: 20px;
  box-sizing: border-box;
  display:inline;
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px){
.grid-item {
  padding: 5px;
}
}

JAVA

jQuery(document).ready(function($){

$(".grid").imagesLoaded(function() {
    $(".grid").masonry({
      itemSelector: ".grid-item"
    });
  });
});