CODEWITHSUNDEEP
cssmasonry
Lovelock
Lovelock

Reputation: 8075

CSS column count causing items to split columns

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?

Upvotes: 2

Views: 1733

Answers (1)

fcastillo
fcastillo

Reputation: 948

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

Upvotes: 6

Related Questions