CSS3 - masonry layout like pinterest - columns / boxes are being split

Question

I have about 6 divs containing text and images. They all vary in length but are the same width. I therefore want to display like Pinterest which I have achieved.

However, the divs are split over multiple columns. How do I stop this from happening? The CSS I have used is below the image.

.masonry {
     margin: 1.5em 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
}

.masonry .feedback-box{
    display: inline-block !important;
    width: 100% !important;
}

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

That's how CSS columns work...if you want a proper masonry layout...you'd have to use a masonry type JS solution. — Paulie_D, Oct 13 '15 at 14:16
In the image you can see how they are broken. The divs are split over multiple columns. — LeeTee, Oct 13 '15 at 15:12
is there no way to achieve this without JQuery? and if I use Jquery what is the simplest solution? — LeeTee, Oct 13 '15 at 15:13

score 0 · Answer 1 · edited May 23 '17 at 11:44

0

Add overflow: hidden; to the items you don't want to be split across columns in Firefox and display: inline-block in Chrome like you did.
Something like:

.masonry .feedback-box{
    display: inline-block; /* Chrome */
    /*width: 100% !important; ?? */
    overflow: hidden; /* Firefox */
    margin-top: 1rem;
}
.masonry .feedback-box:first-child {
  margin-top: 0;
}

Test pen: http://codepen.io/anon/pen/ojeVmm?editors=010

Only tested on Firefox and Chrome, not IE11 or Safari.

Probable duplicate of How to prevent column break within an element?

edited May 23 '17 at 11:44

Community

1
1

answered Oct 13 '15 at 15:59

FelipeAls

21,711
8
54
74

Sorry that didn't work in all browsers. I found break-inside: avoid; was what I needed. – LeeTee Oct 14 '15 at 14:50

score 0 · Accepted Answer · answered Oct 14 '15 at 14:52

I needed to use break-inside: avoid; see below:

.masonry {
     margin: 1.5em 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
}

#client-feedbacks .feedback-box {
        display: inline-block !important;
        width: 100% !important;
        float:none !important;
        -webkit-column-break-inside: avoid; 
        page-break-inside: avoid; 
        break-inside: avoid; 
}

CSS3 - masonry layout like pinterest - columns / boxes are being split

2 Answers2