div.gridcontainer {
    display: grid;
    row-gap: 1em;
    column-gap: 1em;
    grid-template-columns: 25% auto;
    background-color: aqua;
    grid-template-areas:
       "pageheader pageheader"
       "navigation maincontent"
       "navigation pagefooter"
       ;
}
header {
  grid-area: pageheader;
}
footer { 
  grid-area: pagefooter;
}
nav {
    grid-area: navigation;
}
main {
    grid-area: maincontent;
}
header,nav,main,footer { 
    padding: 1em;
}
header { background-color: lightblue;}
nav { background-color: salmon;}
main { background-color: linen;}
footer {background-color: lightgray;}
body { 
    font-family: helvetica, sans-serif;
    background-color: yellow;
}