div.gridcontainer {
   display: grid; 
   grid-template-columns: 10rem auto 20rem;
   grid-template-areas:
   "pheader    pheader     pheader"
   "pnav       pnav        pnav"
   "asidestart maincontent asideend"
   "asidestart    pfooter     asideend";
}

header {
  grid-area: pheader;
}

footer {
  grid-area: pfooter;
}

nav {
  grid-area: pnav;
}

aside.start {
  grid-area: asidestart;
}

aside.end {
  grid-area: asideend;
}

main {
  grid-area: maincontent;
}




/* 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.start {

  background-color: limegreen;
}

aside.end {
  background-color: palevioletred;
}

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

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