2

Trying to not use a jQuery script for a masonry effect so looking to CSS for alternatives.

I am trying to use column count, which appears to be working but not as expected.

So the columns are there, but sometimes the items in the container are being split across more than one as you should be able to see in this example:

http://jsfiddle.net/DTcHh/3858/

#builds {
  width: 100%;
}
.cols {
  -moz-column-count:4;
  -moz-column-gap: 3%;
  -moz-column-width: 25%;
  -webkit-column-count:4;
  -webkit-column-gap: 3%;
  -webkit-column-width: 25%;
  column-count: 4;
  column-gap: 3%;
  column-width: 25%;
}
.item {
  height: auto;
  width: 100%;
}

I am using pagination for the items from a database, and sometimes everything works fine but others it doesn't.

Any logic as to why / what im doing wrong?

1 Answer 1

6

I think this is that you need

.items {
  -webkit-column-break-inside: avoid;
  -o-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  break-inside: avoid;
}
1
  • life saver. Thanks. Can finally ditch the heavy js.
    – Lovelock
    Feb 3, 2015 at 21:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.