title: Column-count issue in chrome
body: <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/nxNnK.png" rel="nofollow noreferrer">Current Status</a></p>
  
  <p>If I remove "display:inline-block" from .grid-item it look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/RbLad.png" rel="nofollow noreferrer">Without display:inline-block</a></p>
  
  <p>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". </p>
  
  <p>The curious part is, on a page which have more posts (4+) it works fine.</p>
  
  <p>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). </p>
  
  <p>I hope you guys can help. Thanks in advance!</p>
  
  <pre><code>.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;
  }
  </code></pre>