header {
  grid-area: pageheader;
}
footer {
  grid-area: pagefooter;
}
nav.site {
  grid-area: navigation;
}
aside.left {
  grid-area: asideleft;
}
aside.right {
  grid-area: asideright;
}
main {
  grid-area: maincontent;
}

header,
nav,
main,
footer,
aside {
  padding: 1em;
}
header {
  background-color: lightblue;
}
nav {
  background-color: salmon;
}
main {
  background-color: linen;
}
footer {
  background-color: lightgray;
}
aside.left {
  background-color: limegreen;
}
aside.right {
  background-color: palevioletred;
}
body {
  font-family: helvetica, sans-serif;
  background-color: yellow;
}
div.gridcontainer {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 0.5em;
  background-color: aqua;
  grid-template-areas:
    "pageheader"
    "navigation"
    "maincontent"
    "asideleft"
    "asideright"
    "pagefooter";
  height: 100vh;
}
div.flexcontainer {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: stretch;
  justify-content: space-evenly;
}
div.flexcontainer article {
  box-sizing: border-box;
  padding: 0.5em;
  margin: 0.5em;
  border: thin solid darkorchid;
  background-color: white;
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
  min-height: 4em;
}
@media (min-width: 600px) {
  div.gridcontainer {
    display: grid;
    grid-template-columns: 25% auto 25%;
    grid-gap: 0.5em;
    background-color: aqua;
    grid-template-areas:
      "pageheader  pageheader  pageheader"
      "navigation  navigation  navigation"
      "asideleft   maincontent asideright"
      "pagefooter  pagefooter  pagefooter";
    grid-template-rows: 120px 2rem auto 5rem;
    height: 100vh;
  }

  div.flexcontainer article {
    flex-basis: 45%;
  }
  body {
    background-color: magenta;
  }
}