* {
    box-sizing: border-box;
}

body {
    border: 0;
    padding: 0;
    font-size: 22px;
    display: grid;
    grid-template-areas:
      'h h h'
      '. m .'
      'f f f';
    grid-template-rows: 100px 1fr 100px;
    grid-template-columns: 20% 60% 20%;
}

@media only screen and (max-width: 800px) {
  body {
    background-color: lightblue;
    display: grid;
    grid-template-areas:
      'h h h'
      '. m .'
      'f f f';
    grid-template-rows: 100px 1fr 100px;
    grid-template-columns: 0% 100% 0%;
  }
}

header {
    grid-area: h;
}

main {
    grid-area: m;
}

footer {
    grid-area: f;
}

header, footer {
    background-color: grey;
    display: flex;
    justify-content: center;
    align-items: center;
}