<section class="my-grid min-vh-100">
  
  <header class="a--header bg-light-blue pa3">
    Header
  </header>
  
  <main class="a--content bg-light-green pa3">
    Main Content
  </main>
  
  <aside class="a--side bg-light-gray pa3">
    Aside
  </aside>

  <footer class="a--footer bg-washed-red pa3">
    Footer
  </footer>

</section>
.my-grid {
  display: grid;
  grid-template-areas: "header    header"
                       "content     side"
                       "footer    footer";
}

.a--header { grid-area: header; }
.a--content { grid-area: content; }
.a--side { grid-area: side; }
.a--footer { grid-area: footer; }

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.6.2/tachyons.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.