title: Is it possible to remove the height from empty rows in grid with `grid-template-areas`?
body: <p>I have a grid with eight (or less) cards. I would like the cards to be automatically placed in the grid and not aware of their width and height. That is, widths and heights should be specified in grid styles. It works great when I have all 8 cards displayed. Example:</p>
  
  <pre><code>grid-template-areas:
      'card-1 card-1 card-2'
      'card-3 card-4 card-5'
      'card-3 card-6 card-5'
      'card-7 card-8 card-8';
  grid-template-rows: 20px 20px 20px 20px;
  grid-template-columns: 20px 20px 20px;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: white;  
  }
  
  .grid {
    display: grid;
    grid-template-areas:
       'card-1 card-1 card-2'
       'card-3 card-4 card-5'
       'card-3 card-6 card-5'
       'card-7 card-8 card-8';
    grid-template-rows: 20px 20px 20px 20px;
    grid-template-columns: 20px 20px 20px;
    grid-gap: 5px;
    background: black;
  }
  
  .card-1 {
    grid-area: card-1;
    background: red;
  }
  
  .card-2 {
    grid-area: card-2;
    background: orange;
  }
  
  .card-3 {
    grid-area: card-3;
    background: yellow;
  }
  
  .card-4 {
    grid-area: card-4;
    background: green;
  }
  
  .card-5 {
    grid-area: card-5;
    background: cyan;
  }
  
  .card-6 {
    grid-area: card-6;
    background: blue;
  }
  
  .card-7 {
    grid-area: card-7;
    background: indigo;
  }
  
  .card-8 {
    grid-area: card-8;
    background: gray;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
    &lt;div class="card-1"&gt;&lt;/div&gt;
    &lt;div class="card-2"&gt;&lt;/div&gt;
    &lt;div class="card-3"&gt;&lt;/div&gt;
    &lt;div class="card-4"&gt;&lt;/div&gt;
    &lt;div class="card-5"&gt;&lt;/div&gt;
    &lt;div class="card-6"&gt;&lt;/div&gt;
    &lt;div class="card-7"&gt;&lt;/div&gt;
    &lt;div class="card-8"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, the problem arises when the cards are less than 8. The last row of the grid is not occupied by the cards, but it still has the height:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: white;  
  }
  
  .grid {
    display: grid;
    grid-template-areas:
       'card-1 card-1 card-2'
       'card-3 card-4 card-5'
       'card-3 card-6 card-5'
       'card-7 card-8 card-8';
    grid-template-rows: 20px 20px 20px 20px;
    grid-template-columns: 20px 20px 20px;
    grid-gap: 5px;
    background: black;
  }
  
  .card-1 {
    grid-area: card-1;
    background: red;
  }
  
  .card-2 {
    grid-area: card-2;
    background: orange;
  }
  
  .card-3 {
    grid-area: card-3;
    background: yellow;
  }
  
  .card-4 {
    grid-area: card-4;
    background: green;
  }
  
  .card-5 {
    grid-area: card-5;
    background: cyan;
  }
  
  .card-6 {
    grid-area: card-6;
    background: blue;
  }
  
  .card-7 {
    grid-area: card-7;
    background: indigo;
  }
  
  .card-8 {
    grid-area: card-8;
    background: gray;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
    &lt;div class="card-1"&gt;&lt;/div&gt;
    &lt;div class="card-2"&gt;&lt;/div&gt;
    &lt;div class="card-3"&gt;&lt;/div&gt;
    &lt;div class="card-4"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can solve this problem by removing grid-template-areas, replacing grid-template-rows with grid-auto-rows, and replacing grid-area with grid-row + grid-column:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: white;  
  }
  
  .grid {
    display: grid;
    grid-auto-rows: 20px;
    grid-template-columns: 20px 20px 20px;
    grid-gap: 5px;
    background: black;
  }
  
  .card-1 {
    grid-row: 1;
    grid-column: 1 / 3;
    background: red;
  }
  
  .card-2 {
    grid-row: 1;
    grid-column: 3;
    background: orange;
  }
  
  .card-3 {
    grid-row: 2 / 4;
    grid-column: 1;
    background: yellow;
  }
  
  .card-4 {
    grid-row: 2;
    grid-column: 2;
    background: green;
  }
  
  .card-5 {
    grid-row: 2 / 4;
    grid-column: 3;
    background: cyan;
  }
  
  .card-6 {
    grid-row: 3;
    grid-column: 2;
    background: blue;
  }
  
  .card-7 {
    grid-row: 4;
    grid-column: 1;
    background: indigo;
  }
  
  .card-8 {
    grid-row: 4;
    grid-column: 2 / 4;
    background: gray;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
    &lt;div class="card-1"&gt;&lt;/div&gt;
    &lt;div class="card-2"&gt;&lt;/div&gt;
    &lt;div class="card-3"&gt;&lt;/div&gt;
    &lt;div class="card-4"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But this method is not very convenient. Help, please, is it possible to do what I want using grid-template-areas and specifying the widths and heights in grid styles? (It is also unacceptable to specify the widths and heights for children of the grid using cascade)</p>