title: Make grid container fill columns not rows
body: <p>I want my grid to fill in vertically like this:</p>
  
  <pre><code>1 4 7 
  2 5 8
  3 6 9
  ... arbitrary number of additional rows.
  </code></pre>
  
  <p>Instead, it fills in horizontally like this:</p>
  
  <pre><code>1 2 3
  4 5 6
  7 8 9
  </code></pre>
  
  <p><strong>I want to specify the number of columns in my grid, not the number of rows.</strong></p>
  
  <p>This is what my div looks like with inline CSS styling:</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-html lang-html prettyprint-override"><code>&lt;div style="display:grid; grid-template-columns:1fr 1fr 1fr;"&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>
  
  <p>It's important that my grid be 3 columns wide, but I want the items to be populated by column, not by row. Is this possible in CSS Grid? I've read through this <a href="https://css-tricks.com/snippets/css/complete-guide-grid/" rel="noreferrer">https://css-tricks.com/snippets/css/complete-guide-grid/</a> but didn't see anything about order.</p>
  
  <p>CSS Flexbox has <code>flex-direction</code>, isn't there an attribute like that for CSS Grid?</p>