* {
  box-sizing: border-box;
}

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: 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.left {
     grid-area: asidestart;
   }
   
   aside.right {
     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;
}
}