* {
  box-sizing: border-box;
}

div.gridcontainer {
  display: block;
}


div.flexcontainer article {
  padding: 0.5rem;
  margin: 0.25rem;
  border: 2px solid darkorchid;
  background-color: white;
  min-height: 4em;
}



body {
  margin: 0;
  font-family: helvetica, sans-serif;
  background-color: yellow;
}

header,
nav,
aside,
main,
footer {
  padding: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

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;
}

header,
main,
footer {
  padding: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 960px) {
  /* here we need to define our grid and grid areas,
     and then place the content into the area */
  div.gridcontainer {
    display: grid;
    grid-template-columns: 15rem auto 15rem;
    grid-gap: 0.5rem;
    grid-template-areas:
      "a a a"
      "b b b"
      "c d e"
      "f f f";
  }

  header {
    grid-area: a;
  }

  footer {
    grid-area: f;
  }

  nav {
    grid-area: b;
  }

  aside.left {
    grid-area: c;
  }

  aside.right {
    grid-area: e;
  }

  main {
    grid-area: d;
  }

  /* Here's the 2 x 2 content for wider screens */
  div.flexcontainer {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;
    justify-content: space-evenly;
  }
  div.flexcontainer article {
    flex-basis: 45%;
    flex-grow: 0;
    flex-shrink: 0;
  }
}