1

I've got a problem with Google Chrome and column-count. Currently I'm using the following CSS part. In Firefox it works fine, but in chrome, the result is this:

Current Status

If I remove "display:inline-block" from .grid-item it look like this:

Without display:inline-block

I've tested a couple of hours to solve this, but I have no clue. There are categories which have only 3 Posts, but column-count is "4".

The curious part is, on a page which have more posts (4+) it works fine.

There must be a solution to fix that?! I don't want to use javascript or masonry because it may result in a problem while loading the content via infinite load (Jetpack).

I hope you guys can help. Thanks in advance!

.grid  { 
-moz-column-count:4;
-moz-column-gap:2em;
  column-count:4;
  column-gap:2em;
  padding-bottom:2px;
  -webkit-column-gap:2em;
  -webkit-column-count:4;
}

.grid-item {
  background-color: #eee;
  margin-bottom:2em;
  display:inline-block;
}
Sascha Rudolph
  • 93
  • 6
  • can you post a jsfiddle for that! the issue may be caused by somthing else than the css you posted – Marouen Mhiri Aug 29 '17 at 11:03
  • Possible duplicate of [Column-count is not working in Chrome](https://stackoverflow.com/questions/41985733/column-count-is-not-working-in-chrome) and [chrome-columns-bug-when-number-of-columns-is-less-then-column-count](https://stackoverflow.com/questions/42296604/chrome-columns-bug-when-number-of-columns-is-less-then-column-count) – Abhishek Pandey Aug 29 '17 at 11:04
  • @AbhishekPandey not really, I've checked it. – Sascha Rudolph Aug 29 '17 at 12:56
  • 1
    @MarouenMhiri The problem is solved below your post, thank you! – Sascha Rudolph Aug 29 '17 at 12:57

1 Answers1

5

The column rule break the element to adjust the height. In your case it happened. Fortunately, you can tell the browser to keep specific elements together with break-inside: avoid;.

At the moment, the property universally accepts the values auto and avoid. Use avoid on an element within a multi-column layout to keep the property from breaking apart.

.grid-item { 
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
Super User
  • 9,448
  • 3
  • 31
  • 47