/* https://bitsofco.de/holy-grail-layout-css-grid */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout */

body {
  margin: 0;
  padding: 0;
  display: grid;

  grid-template-areas:
    "header" "main" "aside" "footer";
}

body > header { grid-area: header }
body > footer { grid-area: footer }

@media ( orientation : landscape ) {
  body {
    grid-template-areas:
      "header header"
      " main  aside "
      "footer footer";

    grid-template-columns: 1fr 20vw;
    grid-template-rows: 10vh 1fr 10vh;
  }
}



/* https://bitsofco.de/holy-grail-layout-css-grid */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout */

body {
  margin: 0;
  padding: 0;
  display: grid;

  grid-template-areas:
    "header" "main" "aside" "footer";
}

@media ( orientation : landscape ) {
  body {
    grid-template-areas:
      "header header"
      " main  aside "
      "footer footer";

    grid-template-columns: 1fr 20vw;
    grid-template-rows: 10vh 1fr 10vh;
  }
}



Add grid-area declarations to master document
Add grid-area declarations to master document
