0

I'm making a simple masonry style layout in pure CSS. It seemed to be clean and simple but at last some bug appear.

JSFIDDLE: http://jsfiddle.net/cheezburger/HXjtK/

CSS:

.masonry { /* Masonry container */
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap: 6px;
    -webkit-column-gap: 6px;
    column-gap: 6px;
}

.item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 2px 0;
    width: 100%;
}

As you can see, I've written to display 3 columns. The first row is good, but why not the others? Is it a known bug?

cheezburger
  • 77
  • 2
  • 9
  • Do you have to use column-count? see if this helps http://jsfiddle.net/HXjtK/2/ – neno Jul 24 '14 at 00:36
  • What do you mean? I see 3 columns in Firefox and Chrome when I view your jsfiddle. The last column is shorter than the others, since there are just 7 images – Jukka K. Korpela Jul 24 '14 at 04:36

0 Answers0