.container {
  display: grid;
  grid-template:
    "myHeader"
    "myMainContent mySidebar"
    "myMainContent myFooter"
    "myMore myMore"
    / 2fr 1fr;
  grid-gap: 10px;
  background-color: white;
  color: blue;
  border: 2px;
}

.header { 
  grid-area: myHeader; 
  width: 100%;
  height: 300px;
}

.main { 
  grid-area: myMainContent; 
  width: 300px;
  height: 300px;
}

.aside { 
  grid-area: mySidebar; 
  width: 100px;
  height: 300px;
  
}
.footer { grid-area: myFooter; 
  width: 100px;
  height: 300px;

}

.more { grid-area: myFooter;
  width: 100px;
  height: 300px;
  

}

@media (max-width: 800px) {
  .container {
    grid-template:
      "myHeader"
      "mySidebar"
      "myMainContent"
      "myFooter";
  }  
}

body{
  font-family: 'Arial Narrow', Arial, sans-serif; 
  font-stretch: condensed;
  color: blue;
  background-color: #00000;
}