Isotope Masonry jQuery 1px Gap Fix
Isotope Masonry 1px Gap Error. How to Fix this 1px Gap on Isotope Masonry.
This is the solution for Masonry 1px Gap. I was having this issue on one of my website and found an article on StackFlow after looking like crazy.
HTML
<div class="grid"> <div class="grid-item" ><a href="#"><img src="..." title="" class="lazy"></a></div> <div class="grid-item grid-item--width2 " ><a href=#"><img src="..." title="" class="lazy"></a></div> <div class="grid-item grid-item--width2 "><a href="#"><img src="..." title="" class="lazy"></a></div> <div class="grid-item" ><a href="#"><img src="..." title="" class="lazy"></a></div> <div class="grid-item" ><a href="#"><img src="..." title="" class="lazy"></a></div> ... </div>
CSS
.grid { margin: 0 auto; width: 100.4%; margin-bottom: 0px !important; } .grid-sizer,.grid-item { width: 24.9%; display: block; float: left; margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; list-style: none!important; } /* 2 columns wide */ .grid-item--width2 { width: 49.8%; display: block; float: left; } .grid-item img{ display:block; width: 100.4%; max-width: 100.4% !important; }
JS
// init Packery var grid = jQuery('.grid').packery({ itemSelector: '.grid-item', percentPosition: true }); // layout Packery after each image loads grid.imagesLoaded().progress( function() { grid.packery(); });
Full Documentation: https://stackoverflow.com/questions/37925902/1px-gap-using-isotope-masonry-or-packery-expecialy-on-safari