CSS grid leaving one square blank

I'm not understanding why the footer is not filling the entire bottom of the screen. Note: if I try to extend aside into that corner instead of footer it will also leave that are blank. Just refuses to fill that area with content. My project consists only of the css and html I have shown here. It behaves the same in chrome.

HTML:

<body>
  <div class="container">
    <header> header</header>
    <main>main</main>
    <aside>aside</aside>
    <footer>footer</footer>
  </div>
</body>

CSS:

.container {
   height: 100vh;
   display: grid;
   grid-template-columns: 2fr 1fr;
   grid-template-rows: 100px 100px 100px;
   grid-gap: 10px;
   grid-template-areas: "header header" "main aside" "footer footer";
 }

header {
   grid-area: header;
   background-color: teal;
}

main {
   grid-area: main;
   background-color: lightblue;
}

aside {
   grid-area aside;
   background-color: green;
}

footer {
  grid-area footer;
  background-color: gray;
}

Result:
firefox firefox css grid prop

Solution

You forgot the colon in your css. It should be grid-area: footer; except you had grid-area footer;. It's fixed now in the snippet below for you. You did the same thing for aside as well. I fixed that in the snippet for you.

.container {
  height: 100vh;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
  grid-template-areas: "header header" "main aside" "footer footer";
}

header {
  grid-area: header;
  background-color: teal;
}

main {
  grid-area: main;
  background-color: lightblue;
}

aside {
  grid-area: aside;
  background-color: green;
}

footer {
  grid-area: footer;
  background-color: gray;
}

<body>
  <div class="container">
    <header> header</header>
    <main>main</main>
    <aside>aside</aside>
    <footer>footer</footer>
  </div>
</body>