Masonry unintended spacing below images until resizing

Question

I just started using masonry with imagesloaded and I'm having a strange issue. Everything is working as I intend except below each image there is about a 3px space that I do not want there, this space goes away once I resize the window. I have no idea what is causing this and any help would be great. I've tried removing the border and there is still a space.

CSS:

/* Masonry */
* { 
    box-sizing: border-box; 
}

// Grid
.grid {
    //background: #DDD;
}

// Clearfix
.grid:after {
    content: '';
    display: block;
    clear: both;
}

// Grid Item
.grid-sizer, .grid-item {
    width: 20%;
}

.grid-item {
    float: left;
    border: 5px solid $babyBlue;
}

.grid-item img {
    display: block;
    max-width: 100%;
}

Javascript:

// Enable Masonry
    var $grid = $('.grid').imagesLoaded( function() {
        // init Masonry after all images have loaded
        $grid.masonry({
            // set itemSelector so .grid-sizer is not used in layout
            itemSelector: '.grid-item',
            // use element for option
            columnWidth: '.grid-sizer',
            percentPosition: true
        });
    });

Answer 1

Sounds like https://stackoverflow.com/a/37372213/1544886

The answer there suggests adding:

body { overflow-y: scroll; }

Also when in http://jsfiddle.net/drw158/sAkjv/1/, adding:

display: block; to .ct-coll-item img { ... }

closed that gap. (I think that idea came from Vertical Gaps Appearing - jQuery Masonry - (seamless photo grid))

Otherwise perhaps Masonry grid not showing properly may help.