title: Can I use css-grid to display an unknown number of items, in left-to-right reading order, over two rows?
body: <p>I'd like to display a number of divs in left-to-right order, giving them an equal amount of space and spreading them over two rows.</p>
  <p>e.g.</p>
  <p>[div 1] | [div 2] | [div 3]<br />
  [div 4] | [div 5] | [div 6]</p>
  <p>or</p>
  <p>[div 1] | [div 2] | [div 3] | [div 4]<br />
  [div 5] | [div 6] | [div 7] | [div 8]</p>
  <p>What's important is that I don't know how many elements there will be. If it's six, then I'll need three columns. If it's eight, then I'll need four columns. And so on.</p>
  <p>If I give the grid container the following attributes:</p>
  <pre><code>  grid-auto-flow: column;
    grid-template-rows: repeat(2, 1fr);
  </code></pre>
  <p>Then my elements are given the right amount of space, but are displayed in the wrong order.</p>
  <p>[div 1] | [div 3] | [div 5] | [div 7]<br />
  [div 2] | [div 4] | [div 6] | [div 8]</p>
  <p>If I give the grid container the following attributes instead:</p>
  <pre><code>  grid-auto-flow: row;
    grid-template-rows: repeat(2, 1fr);
  </code></pre>
  <p>Then the elements appear in a single column.</p>
  <p>[div 1]<br />
  [div 2]<br />
  ...</p>
  <p>Is there a simple way to display my elements across 2 rows, while maintaining left-to-right reading order, if I don't know how many elements there will be?</p>