title: Multi-column grid with variable number of different height children
body: <p>I am trying to make a screen that displays items in the following manner:</p>
  <ol>
  <li>The &quot;columns&quot; have two items in them <strong>such that the odd items are on the left in the column</strong></li>
  <li>The items are varying heights, but fixed width. This causes there to be a <strong>variable number of items in each column</strong>.</li>
  <li>The &quot;columns&quot; wrap to the right to avoid scrolling</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/nZYxE.png" rel="nofollow noreferrer">Variable-sized items in a grid</a></p>
  <p>So far, I've tried leveraging both <code>display: flex;</code> and <code>display: grid</code> but am unable to get either to achieve the above image. The flex method does not display the items in the order I want. The grid method forces items in the same row to have the same height as the longest element.</p>
  <p><a href="https://jsfiddle.net/kodonnell_heila/sn05wxte/21/" rel="nofollow noreferrer">Example with flex</a></p>
  <p><a href="https://jsfiddle.net/kodonnell_heila/d8to1uhj/39/" rel="nofollow noreferrer">Example with grid</a></p>
  <p>So, is there a way to do this with just CSS? I'm not opposed to using javascript to achieve this, but I'd rather use CSS if possible.</p>