/*
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 *  https://www.codementor.io/karaluton/a-beginner-s-guide-to-css-grid-j27g9uqys?utm_swu=7100
*/

body {

  display: grid;
  grid-template-columns: 70% 30%;

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

header { grid-area: header; }
main   { grid-area: main;   }
aside  { grid-area: aside;  }
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://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 * https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66
 * https://www.codementor.io/karaluton/a-beginner-s-guide-to-css-grid-j27g9uqys?utm_swu=7100
*/

body {

  display: grid;
  grid-template-columns: 70% 30%;

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

header { grid-area: header; }
main   { grid-area: main;   }
aside  { grid-area: aside;  }
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
  }
}
*/

Add link to css grid layout
Add link to css grid layout
