demo.css

html {
  font-size: 20px; }

body {
  display: grid;
  grid-template-rows: 180px 2fr 1fr;
  height: 90vh;
  box-sizing: border-box; }
  body > header, body > footer {
    background-color: rgba(60, 110, 60, 0.5);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 1rem; }
    body > header #layoutinfo, body > footer #layoutinfo {
      color: #a032a0;
      border: 2px #a032a0 solid;
      max-width: 80vw;
      margin: auto; }

main {
  border: 2px solid red;
  min-height: 80vh;
  background-color: rgba(180, 20, 20, 0.05);
  transition: all 5s ease; }
  main > *, main article > * {
    border: 2px solid blue;
    margin: 5px;
    padding: 5px;
    background-color: rgba(30, 30, 200, 0.1);
    transition: all 5s ease;
    /* display: inline; */
    /* flex: 1 200px; */
    /*  */ }
  main h1 > span {
    background-color: yellow;
    border: 2px solid magenta; }
  main > nav {
    background-color: rgba(40, 40, 100, 0.3); }
  main > aside {
    background-color: rgba(100, 70, 120, 0.3); }
  main > footer {
    background-color: rgba(40, 40, 100, 0.3); }

main.make_flex_column {
  display: flex;
  flex-direction: column;
  align-items: stretch; }

main.make_flex_reverse {
  display: flex;
  flex-direction: row-reverse; }

main.make_flex {
  display: flex; }

main.make_grid {
  display: grid;
  grid-template-areas: "nav nav nav" "aside article article" "footer footer footer"; }
  main.make_grid > nav {
    grid-area: nav; }
  main.make_grid > aside {
    grid-area: aside; }
  main.make_grid > article {
    grid-area: article;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr 3fr; }
    main.make_grid > article > header {
      grid-column: 1/3; }
  main.make_grid > footer {
    grid-area: footer; }

/* display: block; // this is the default */
/* display: none; */
/* display: flex; */
/* flex-direction: column; */
/* align-items: stretch; */
/* align-items: flex-end; */
/* align-items: flex-start; */
/* display: grid */
/* grid-template-columns: 300px 300px 300px; */
/* grid-template-columns: 1fr 3fr 1fr; */
/* grid-template-areas: "nav nav nav"
                             "aside art footer"
                             ;*/
/* Not really relevant for today but I want you to see how I modified content with pure CSS */
/* p.normal:nth-of-type(2)::after { */
/*     content: ' -    Mwahahahahhaha'; */
/*     background-color: purple; */
/* } */
/* put our media queries here */
@media screen and (max-width: 800px) {
  main {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-template-areas: "nav nav nav" "aside art art" "footer footer footer"; } }
@media screen and (max-width: 500px) {
  main {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-template-areas: "nav" "art" "aside" "footer"; } }