title: CSS column-count columns differ in height
body: <p>I'm trying to create a masonry grid of images The general idea is to use column-count in to achieve <a href="http://cssdeck.com/labs/css-only-pinterest-style-columns-layout" rel="nofollow noreferrer">this example</a>.</p>
  
  <p>I have three columns with a bunch of images, and the CSS and HTML is identical to that in the link. The problem is that the columns won't align properly. The right-most column is often much shorter than the others. Obviously the columns will never align perfectly unless the images are the same size, but the difference is much larger than that. Sometimes the first two column will hold ten images each but the third column is holding only two (with the images being similar sizes), meaning you could easily have moved a few image from the first and second column to the third to get a better alignment. This result seems to go against the idea of column-count.</p>
  
  <p>This also happens in the link above if you change some of the images to much smaller images. Is it simply column-count that is still buggy and shouldn't be used, or is there some trick to stop this from happening?</p>
  
  <p>Edit: Here is the basic CSS (minus lots of basic styling like transitions and stuff, which I have tried to remove to see if they where the culprit).</p>
  
  <pre><code>#wrapper {
      width: 90%;
      max-width: 1100px;
      min-width: 800px;
      margin: 50px auto;
  }
  
  #columns {
      -webkit-column-count: 4;
      -webkit-column-gap: 10px;
      -webkit-column-fill: auto;
      -moz-column-count: 4;
      -moz-column-gap: 10px;
      -moz-column-fill: auto;
      column-count: 4;
      column-gap: 15px;
      column-fill: auto;
  }
  
  .pin {
      display: inline-block;
      background: #FEFEFE;
      border: 2px solid #FAFAFA;
      box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
      margin: 0 2px 15px;
      -webkit-column-break-inside: avoid;
      -moz-column-break-inside: avoid;
      column-break-inside: avoid;
      padding: 15px;
      padding-bottom: 5px;
  }
  </code></pre>
  
  <p>And <a href="http://jsfiddle.net/bXSqt/3/" rel="nofollow noreferrer">here is a JSFiddle</a> showing the problem. There are four columns, but in Chrome the third column is shorter than it needs to be, an image could have been moved from the fourth column to make them more even. Note that this example is "not that bad", but the problem can be much larger than this. Sometimes the difference is equal to the size of several images.</p>