.main { display: grid;
       grid: "h h h"
             "a b c"
             "f f f";
       grid-template-columns: 20% 1fr 20%; }
	   
header  { grid-area: h; min-width: auto;}	   
article { grid-area: b; min-width: auto;     }
nav     { grid-area: a; min-width: 50px;/* auto min-width */ }
aside   { grid-area: c; min-width: auto;     }
footer  { grid-area: f; min-width: auto;}

#i1  {
  background-image: url("../images/ClearDayBkgrd.jpg");
  background-color: #ff00ff;
}

header {
  text-align:center;
  /*background-color: #4E63B1;*/
  border-style:solid;
  border-color:yellow;
}

nav {
  
  border-style:solid;
  border-color:yellow;
  text-align:center;
  font-size:0.8em;
}

footer {
  
  border-style:solid;
  border-color:yellow;
 }
 
aside {
  
  border-style:solid;
  border-color:yellow;
  text-align:center;
  font-size:0.8em;
}
 
@media all and (max-width: 60em) {
  /* Too narrow to support three columns */
  main { display: block; }
}