/*
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 * https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66
*/

header { grid-area: header }
main   { grid-area: main   }
aside  { grid-area: aside  }
footer { grid-area: footer }

body {
  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: 70% 30%;
    grid-template-rows: 15vh 70vh  15vh
  }
}

/*
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 * https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66
*/

header { grid-area: header }
main   { grid-area: main   }
aside  { grid-area: aside  }
footer { grid-area: footer }

body {
  display: grid;
  grid-template-areas:
    "header" "main" "aside" "footer";
  grid-template-rows: 15vh 55vh 20vh  10vh
}

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

    grid-template-columns: 70% 30%;
    grid-template-rows: 15vh 70vh  15vh
  }
}

Add grid template rows for mobile CSS layout
Add grid template rows for mobile CSS layout
