title: CSS Grid - auto generate new rows breaks on auto-flow-column
body: <p>I have a css grid containing some links.
  It is a three col grid, with any number of rows (depending on the number of items).<br />
  I would want even distribution for the number of items across each column preferably.</p>
  <p>The num of cols and rows are set by:<br />
  <code>grid-template-columns: repeat(3, 1fr);</code> // make it three columns wide<br />
  <code>grid-template-rows: repeat(auto-fill);</code> // auto generate new rows</p>
  <p>This works perfectly, except when I try to make the grid flow by columns, not rows:<br />
  <code>grid-auto-flow: column;</code> // this breaks it</p>
  <p>Example:
  <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>.container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(auto-fill);
    /*grid-auto-flow: column;*/ 
  }
  
  a {
    height: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;a href="#"&gt;item one&lt;/a&gt;
    &lt;a href="#"&gt;item two&lt;/a&gt;
    &lt;a href="#"&gt;item three&lt;/a&gt;
    &lt;a href="#"&gt;item four&lt;/a&gt;
    &lt;a href="#"&gt;item fuve&lt;/a&gt;
    &lt;a href="#"&gt;item six&lt;/a&gt;
    &lt;a href="#"&gt;item seven&lt;/a&gt;
    &lt;a href="#"&gt;item eight&lt;/a&gt;
    &lt;a href="#"&gt;item nine&lt;/a&gt;
    &lt;a href="#"&gt;item ten&lt;/a&gt;
    &lt;a href="#"&gt;item eleven&lt;/a&gt;
    &lt;a href="#"&gt;item twelve&lt;/a&gt;
    &lt;a href="#"&gt;item thirteen&lt;/a&gt;
    &lt;a href="#"&gt;item fourteen&lt;/a&gt;
    &lt;a href="#"&gt;item fifteen&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>How can I keep three columns in my grid, make it flow via columns instead of rows and let it auto generate those rows as and when needed?</p>