title: Create a CSS Grid that flows by column, with dynamic columns and rows based on content
body: <p>I have a dynamic number of elements (all of equal dimensions).  I want to position them in a grid, such that they are ordered in columns, with a dynamic number of columns based on the available container width, and with a dynamic number of rows based on the number of elements.</p>
  
  <p>For example, assuming there are 9 elements:</p>
  
  <pre><code>1 4 7
  2 5 8
  3 6 9
  </code></pre>
  
  <p>But if the container width expands:</p>
  
  <pre><code>1 3 5 7 9
  2 4 6 8
  </code></pre>
  
  <p>Or shrinks:</p>
  
  <pre><code>1 6
  2 7
  3 8
  4 9
  5
  </code></pre>
  
  <p>This works fine when the items are positioned by row, but not by column.  Also, if I explicitly set the number of rows, it works fine, but if I use auto-fill for both rows and columns, it just displays everything in a single row.</p>
  
  <p>Here's a simple example I would expect to be rendered as a 3x3 grid:
  <a href="https://codepen.io/anon/pen/ZxPQNd" rel="noreferrer">https://codepen.io/anon/pen/ZxPQNd</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#grid {
    width: 320px;
    border: 1px solid red;
    display: grid;
    grid-gap: 10px;
    grid-auto-flow: column;
    grid-template-rows: repeat(auto-fill, 100px);
    grid-template-columns: repeat(auto-fill, 100px);
    grid-auto-columns: 100px;
    grid-auto-rows: 100px;
  }
  
  #grid&gt;div {
    background: lime;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="grid"&gt;
    &lt;div&gt;1&lt;/div&gt;
    &lt;div&gt;2&lt;/div&gt;
    &lt;div&gt;3&lt;/div&gt;
    &lt;div&gt;4&lt;/div&gt;
    &lt;div&gt;5&lt;/div&gt;
    &lt;div&gt;6&lt;/div&gt;
    &lt;div&gt;7&lt;/div&gt;
    &lt;div&gt;8&lt;/div&gt;
    &lt;div&gt;9&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>