Jquery Noob Jquery Noob - 3 months ago 14
CSS Question

How do i fix this broken CSS Masonry?

I am modifying a pinterest clone script and working on replacing jquery masonry with css masonry, i think have added css values properly, but the masonry is still breaking a bit, can you guys please take a look and let me know what i might be doing wrong?

CSS thats making the masonry work is listed below,

Code:

#grid-container {
max-width:1200px;
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
margin: 176px auto 0;
}

#grid-container > .post {
width: 290px;
margin: 0 5px 0;
position: relative;
display: block;
height: auto;
}


Live URL : http://labs.imvges.xyz/

Regards,
Jqn

Answer

Setting column-count to 4 will ensure there are always 4 columns, instead of showing the max number of columns based on the post card widths. Use column-width instead. See below for that change and a few others.

#grid-container {
    max-width:1200px;
    -moz-column-width: 288px;
    -webkit-column-width: 288px;
    column-width: 288px;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
    margin: 176px auto 0;
}

#grid-container > .post {
    width: 100%;
    margin: 0 5px 0;
    display: inline-block;
    height: auto;
}
Comments