title: CSS grid, remove gap when area is optional
body: <p>I'm starting using CSS grid (pretty amazing!). I'm starting with the most basic layout: mobile layout. Also, I'm using media queries to change the layout as the web page grows.</p>
  
  <p>For now, my layout consists of 3 areas. The exact order is the content area, the sidebar area and the commenting area. The <strong>commenting area is optional</strong> and may not display at all. There is a <strong>gap of 40px</strong> between areas.</p>
  
  <p>This is the mobile layout css</p>
  
  <pre><code>.grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-gap: 40px;
  }
  </code></pre>
  
  <p>If the commenting area doesn't exist, the gap for the commenting area also does not exist, which it's what i want.</p>
  
  <p><a href="https://jsfiddle.net/p54od8ho/" rel="noreferrer">https://jsfiddle.net/p54od8ho/</a></p>
  
  <p>When the page grows, i'm changing the layout, like this:</p>
  
  <pre><code>@media screen and (min-width: 768px) {
    .content {
      grid-area: content;
    }
    .sidebar {
      grid-area: sidebar;
    }
    .comments {
      grid-area: comment;
    }
    .grid {
          grid-template-columns: 1fr 300px;
          grid-template-rows: auto;
          grid-template-areas:
              "content sidebar"
              "comment sidebar";
    }
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/g20gtd4z/" rel="noreferrer">https://jsfiddle.net/g20gtd4z/</a></p>
  
  <p>The gap of 40px exists because the comment area exists.</p>
  
  <p>But, this is what happens when the comment area does not exist:</p>
  
  <p><a href="https://jsfiddle.net/6Lfg55my/1/" rel="noreferrer">https://jsfiddle.net/6Lfg55my/1/</a></p>
  
  <p>If you notice, even if the comment area doesn't exist, the 40px gap exists.</p>
  
  <p>I believe one solution is to create a class, just to remove the comment area.</p>
  
  <pre><code>.grid.no_comment {
              grid-template-areas:
                  "content sidebar"
                  ". sidebar";
        }
  </code></pre>
  
  <p>There has to be a better and more simple way (or maybe not)..
  Is there a way, using only the grid options, to make it so when the comment area does not exist, the gap is also gone ?</p>