Joe Scotto Joe Scotto - 1 year ago 64
CSS Question

Masonry unintended spacing below images until resizing

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.enter image description here


/* 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%;


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

Answer Source

Sounds like

The answer there suggests adding:

body { overflow-y: scroll; }

Also when in, 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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download