title: CSS grid doesn't fill up the remaining space
body: <p>In my <code>Angular</code> project, I have a <code>paragraph</code>, an <code>image</code>, and a <code>button</code>.</p>
  <p>I'm using <code>css grid</code> to make them look like the design but no matter how hard I try, they don't take up the remaining height.</p>
  <p>As you can see in the images below, the button should be at the very bottom.</p>
  <p>Below is the design I'm trying to achieve:</p>
  <p><a href="https://i.stack.imgur.com/2WoI8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2WoI8.png" alt="Design file" /></a></p>
  <p>And this is what I have:</p>
  <p><a href="https://i.stack.imgur.com/ZXi7a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZXi7a.png" alt="enter image description here" /></a></p>
  <p>My <code>html</code> code:</p>
  <pre><code>&lt;div id=&quot;parent-container&quot;&gt;
          &lt;img id=&quot;image&quot; src=&quot;assets/images/kyc-newbie.svg&quot; alt=&quot;newbie&quot;/&gt;
          &lt;p id=&quot;description&quot; class=&quot;settings-page__info&quot;&gt;
            As a user, you must verify your identity in order to make transactions on Didex platforms
          &lt;/p&gt;
          &lt;a id=&quot;button&quot; routerLink=&quot;/user/kyc&quot;&gt;
            &lt;button mat-raised-button color=&quot;primary&quot;&gt;
              Verify Identity
            &lt;/button&gt;
           &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And here's the <code>scss</code>:</p>
  <pre><code>#parent-container {
        display: grid;
        grid-template-rows: repeat(8, auto);
        grid-template-columns: 100%;
        row-gap: 40px;
        grid-template-areas:
          '.'
          '.'
          '.'
          'image'
          'description'
          '.'
          '.'
          'button';
        height: 100%;
        width: 100%;
        max-height: 100vh;
  
        #image {
          grid-area: image;
        }
        #description {
          grid-area: description;
        }
        #button {
          grid-area: button;
        }
  }
  </code></pre>