How to fill voids in Masonry layout?

$(document).ready(function() { $('.grid').masonry({ // options itemSelector: '.grid-item', horizontalOrder: true, gutter: 10 //columnWidth: 200 }); }); 

 .width-1 { width: 534px; float: left; } .width-2 { width: 275px; float: left; } .width-3 { width: 265px; float: left; } .grid-item img { width: 100%; height: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <div class="grid"> <div class="grid-item width-1"><img src="images/masonry/1portfolio-work-534.png" alt="work"></div> <div class="grid-item width-1"><img src="images/masonry/2portfolio-work-1-534.png" alt="port"></div> <div class="grid-item width-3"><img src="images/masonry/3portfolio-work-11-265.png" alt="port"></div> <div class="grid-item width-1"><img src="images/masonry/7portfolio-work-8-265.png" alt="port"></div> <div class="grid-item width-2"><img src="images/masonry/4portfolio-work-7-275.png" alt="port"></div> <div class="grid-item width-3"><img src="images/masonry/5portfolio-work-10-265.png" alt="port"></div> <div class="grid-item width-3"><img src="images/masonry/6portfolio-work-9-534.png" alt="port"></div> <div class="grid-item width-3"><img src="images/masonry/8portfolio-work-265.png" alt="port"></div> <div class="grid-item width-3"><img src="images/masonry/9portfolio-work-6-275.png" alt="port"></div> <div class="grid-item width-2"><img src="images/masonry/10portfolio-work1-265.png" alt="port"></div> <div class="grid-item width-2"><img src="images/masonry/11portfolio-work-5-275.png" alt="port"></div> </div>