title: How to make a column span full width when a second column is not there? (CSS Grid)
body: <p>I know there are similar questions but this is specifically asking how to do this using CSS Grid Layout.</p>
  
  <p>So we have this basic grid setup:</p>
  
  <p><strong>HTML (with sidebar):</strong></p>
  
  <pre><code>&lt;div class="grid"&gt;
  
    &lt;div class="content"&gt;
      &lt;p&gt;content&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="sidebar"&gt;
      &lt;p&gt;sidebar&lt;/p&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.grid {
    display: grid;
    grid-template-columns: 1fr 200px;
  }
  </code></pre>
  
  <p>To create a layout that looks something like this:</p>
  
  <pre><code>| content               | sidebar |
  </code></pre>
  
  <p>If the page doesn't have a sidebar though, ie. the html looks like this but with the same CSS:</p>
  
  <p><strong>HTML (no sidebar):</strong></p>
  
  <pre><code>&lt;div class="grid"&gt;
  
    &lt;div class="content"&gt;
      &lt;p&gt;content&lt;/p&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The page layout looks like this (dashes represent empty space)</p>
  
  <pre><code>| content               | ------- |
  </code></pre>
  
  <p>I know why it does that, the grid column is still defined in the <code>grid-template-columns</code> rule.</p>
  
  <p>I'm just wondering how to tell the grid that if there is no content, then fill the remaining space similar to how <code>flex-grow</code> works for <code>flexbox</code>.</p>
  
  <p>The desired result would look like this if no sidebar is present.</p>
  
  <pre><code>| content                         |
  </code></pre>