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




/* content */
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.5rem;
  margin: 0.25rem;
  border: 2px solid darkorchid;
  background-color: white;
  flex-basis: 45%;
  flex-grow: 0;
  flex-shrink: 0;
  min-height: 4em;
}


/* styles below have nothing to do with grid or layout */
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;
}