title: CSS-only masonry layout
body: <p>I need to implement a masonry layout. However, for a number of reasons I don't want to use JavaScript to do it.</p>
  <p><a href="https://i.stack.imgur.com/Z25DI.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Z25DI.png" alt="A grid of multiple columns of rectangles of varying height." /></a></p>
  <p>Parameters:</p>
  <ul>
  <li>All elements have the same width</li>
  <li>Elements have a height that cannot be calculated server side (an image plus various amounts of text)</li>
  <li>I can live with a fixed number of columns if I have to</li>
  </ul>
  <p>there is a trivial solution to this that works in modern browsers, <a href="http://w3bits.com/labs/css-masonry/" rel="noreferrer">the <code>column-count</code> property.</a></p>
  <p>The problem with that solution is that elements are ordered in columns:</p>
  <p><a href="https://i.stack.imgur.com/uRAHy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uRAHy.png" alt="Starting from the top leftmost box, they're numbered 1 through 4 straight down, the topmost box in the next column is 5, and so on." /></a></p>
  <p>While I need the elements to be ordered in rows, at least approximately:</p>
  <p><a href="https://i.stack.imgur.com/d991Y.png" rel="noreferrer"><img src="https://i.stack.imgur.com/d991Y.png" alt="Starting from the top leftmost box, they're numbered 1 through 6 straight across, but because box 5 is the shortest the box underneath it is 7 as it has the appearance of being on a row higher than the next box on the far left." /></a></p>
  <p>Approaches I've tried that don't work:</p>
  <ul>
  <li>Making items <code>display: inline-block</code>: <a href="https://jsfiddle.net/p0czqdz0/7/" rel="noreferrer">wastes vertical space.</a></li>
  <li>Making items <code>float: left</code>: <a href="https://jsfiddle.net/p0czqdz0/8/" rel="noreferrer">lol, no.</a></li>
  </ul>
  <p>Now I <em>could</em> change the server side rendering and reorder the items dividing the number of items by the number of columns, but that's complicated, error-prone (based on how browsers decide to split the item list into columns), so I'd like to avoid it if possible.</p>
  <p>Is there some flexbox magic that makes this possible?</p>