<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.js"></script> <div class="grid-container"> <div class="grid"> <div class="item"><img src="http://dummyimage.com/340x400/000/fff"></div> <div class="item"><img src="http://dummyimage.com/400x200/000/fff"></div> <div class="item"><img src="http://dummyimage.com/250x350/000/fff"></div> <div class="item"><img src="http://dummyimage.com/340x400/000/fff"></div> <div class="item"><img src="http://dummyimage.com/600x400/000/fff"></div> <div class="item"><img src="http://dummyimage.com/340x400/000/fff"></div> <div class="item"><img src="http://dummyimage.com/340x400/000/fff"></div> <div class="item"><img src="http://dummyimage.com/340x400/000/fff"></div> <div class="item"><img src="http://dummyimage.com/340x400/000/fff"></div> </div> </div>

.grid-container { position: relative; width: 100%; overflow: hidden; transition: all 0.5s; -webkit-transition: all 0.5s; } .grid { margin: 0 auto; } .item { color: white; display: table; font-size: 1.4em; text-align: center; margin: 5px; width: 23%; /* 270px */ } img{ width: 100%; }

jQuery(document).ready(function ($) { var $container = $('.grid').masonry({ columnWidth: 25, //280 itemSelector: '.item', isFitWidth: true }); });