title: Making an element span all columns on a grid with automatic columns
body: <p>I have a CSS grid with automatic columns and 2 rows, where all but a specific element go into the first row. The special element is placed on the second row, and should fill the whole space used by all columns.</p>
  
  <p>The current implementation is like this:</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>.TabArea {
    display: grid;
    grid-auto-columns: auto;
    grid-template-rows: auto 1fr;
    grid-auto-flow: column;
    
    /* for visualization purposes */
    background: gainsboro;
  }
  
  .Tab-title {
    grid-row: 1;
  }
  
  .Tab-body {
    grid-row: 2;
    grid-column: 1 / -1;
    
    /* for visualization purposes */
    background: beige;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="TabArea"&gt;
    &lt;div class="Tab-title"&gt;Title A&lt;/div&gt;
    &lt;div class="Tab-title"&gt;Title B&lt;/div&gt;
    &lt;div class="Tab-title"&gt;Title B&lt;/div&gt;
    &lt;div class="Tab-body"&gt;content&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But as you can see, the <code>Tab-body</code> is only placed on the first column, despite the fact there are additional columns. How can I make it span all columns?</p>
  
  <p>The solution in <a href="https://stackoverflow.com/a/44052563/1045510">https://stackoverflow.com/a/44052563/1045510</a> does not work here because the number of columns is variable, and columns would take up space on the end, pushing the <code>Tab-title</code>s to the left.</p>