How can I have a sticky footer with my CSS Grid layout?

Question

I found this CodePen solution for a sticky footer in a CSS Grid layout, but it has two problems for me:

1. It is kinda ugly with min-height: 100% a

Answer 1

Here is a CSS Grid solution, but it's far better using a class for the target.
Using grid-areas this will be very straightforward:

html,body{
  height: 100%;
}
body{
  margin: 0;
}
body {
  display: grid;
  grid-gap: 10px;
  height: 100%;
  grid-template-columns:1fr;
  grid-template-areas:
            "nav"
            "main"
            "footer";
  grid-template-rows: 100px 1fr 80px;
}
nav {
  grid-area: nav;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}
nav {
  background-color: #7E57C2;
}
main {
  background-color: #F8BBD0;
}
footer {
  background-color: #7E57C2;
}

https://codepen.io/whisher/pen/vWmvQw