sourlemonaid sourlemonaid - 1 month ago 5x
CSS Question

masonry won't fill in the gaps in my grid

I have this masonry grid i tried to set up

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
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


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