sourlemonaid sourlemonaid - 3 months ago 9
CSS Question

masonry won't fill in the gaps in my grid

I have this masonry grid i tried to set up http://codepen.io/soursocks/pen/QKLGrR

but for some reason the grid won't fill itself out.

i think it might be an issue with my css.

probably something to do with

.grid-items {
background: black;
margin-left: 0;
}

/* items are not quite 1/3 wide */
.item {
float: left;
width: 33.2%;
}

/* images cover up the gap */
.item img {
display: block;
width: 100.5%;
}


i followed an example i saw here http://codepen.io/desandro/pen/myBxD
but can't seem to recreate the effect

i know this has been posted before, but i couldn't find one that answered my question

Answer

you just have 2 mistakes

in your html remove the dot before the grid-items

<div class="grid-items">

and include the masonry js in your js section

http://rawgithub.com/desandro/masonry/v2.1.08/jquery.masonry.js
Comments