div.gridcontainer { 
  display: grid;
  grid-gap: 0.5rem;

  grid-template-columns:  100%;
  grid-template-areas:
  "pageheader"
  "nav"
  "main"
  "asider"
  "asidel"
  "pagefooter"
  ;
}

header, nav, main, footer, aside { padding: 0.5rem;}
header {
  grid-area: pageheader;
  background-color: lightblue;
}
nav {
  grid-area: nav;
  background-color: salmon;
}
main {
  grid-area: main;
  background-color: linen;
}
footer {
  grid-area: pagefooter;
  background-color: lightgray;
}
aside.left {
  grid-area: asidel;
  background-color: limegreen;
}
aside.right {
  grid-area: asider;
  background-color: palevioletred;
}
body {
  font-family: helvetica, sans-serif;
  background-color: yellow;
}

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: 100%;
  flex-grow: 0;
  flex-shrink: 0;
  min-height: 4em;
}

@media (min-width: 768px) {
  div.gridcontainer { 
    grid-template-columns:  15% auto 15%;
    grid-template-areas:
    "pageheader pageheader pageheader"
    "nav        nav        nav"
    "asidel     main       asider"
    "pagefooter pagefooter pagefooter";
  }
  div.flexcontainer article {
    flex-basis: 45%;
  }
}