title: Dynamic CSS grid with template-columns: auto and full-width row
body: <p>I'm trying to build a CSS grid dynamically from some data. I'm trying to achieve a layout like:</p>
  <pre><code>   | a | b | c | d
  ---+---+---+---+---
  full width
  ---+---+---+---+--
   x | 1 | 2 | 3 | 4
  ---+---+---+---+--
   y | 2 | 3 | 4 | 5
  </code></pre>
  <p>Where I have a dynamic number of columns, and a full width row that spans all of the columns.</p>
  <p>The markup I'm generating (in a loop in my template) ends up looking something like:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;wrapper&quot;&gt;
    &lt;div class=&quot;box header&quot;&gt;header 1&lt;/div&gt;
    &lt;div class=&quot;box header&quot;&gt;header 2&lt;/div&gt;
    &lt;div class=&quot;box header&quot;&gt;header 3&lt;/div&gt;
    &lt;div class=&quot;box header&quot;&gt;header 4&lt;/div&gt;
    &lt;div class=&quot;box full-width&quot;&gt;full width&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And I'm attempting to style it by marking the full-width row with:</p>
  <pre><code>    .full-width {
          grid-column: 1 / -1;
          grid-row: 2;
      }
  </code></pre>
  <p>My understanding is that the <code>1 / -1</code> is supposed to make the row span from the first column to the last. In this case, it doesn't, and the width of the row is unaffected. You can see this issue <a href="https://codepen.io/andrewray/pen/VwWKLwQ" rel="nofollow noreferrer">live on Codepen</a>.</p>