CSS Grid with Header & Footer

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
}

#grid-wrapper {
  height: 100vh;

  /* grid container settings */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'header'
    'main'
    'footer';
    border:2px solid #ff9900;
}

#grid-wrapper > .header {
  grid-area: header;
  background-color: #ffdede;
  border:1px solid #990000;
  height: 2em;
}

#grid-wrapper > .main {
  grid-area: main;
  padding: 15px 5px 10px 5px;
  background-color: #deffde;
  border:1px solid #006600;
}

#grid-wrapper > .footer {
  grid-area: footer;
  background-color: #dedeff;
  border:1px solid #000099;
  height: 2em;
}

</style>
</head>

<body>

<div id='grid-wrapper' >
    <div class="header">HEADER</div>
    <div class="main">MAIN (height fills full space)</div>
    <div class="footer">FOOTER</div>
</div>

</body>
</html>