div.gridcontainer {
  display: grid;
  row-gap: 1em;
  column-gap: 1em;
  grid-template-columns: 30% auto;
  background-color: aqua;
}
header {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: 2;
}
footer {
  grid-column: 2 / -1; /* shorthand */
  grid-row: 3 / 4;
}
nav {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 4;
}
main {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}
header,
nav,
main,
footer {
  padding: 1em;
}
header {
  background-color: lightblue;
}
nav {
  background-color: salmon;
}
main {
  background-color: linen;
}
footer {
  background-color: lightgray;
}
body {
  font-family: helvetica, sans-serif;
  background-color: yellow;
}