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