<section class="my-grid min-vh-100">
  
  <header class="a--header bg-light-blue pa3 flex items-center">
    <h1 class="mv0">Header</h1>
  </header>
  
  <main class="a--content bg-light-green pa3">
    <h3 class="mt0">Main Content</h3>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ipsam quas veniam beatae a repellat, magnam minima optio odit doloribus. Aut architecto commodi dolorem perferendis magni consectetur eos similique asperiores.</p>   
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ipsam quas veniam beatae a repellat, magnam minima optio odit doloribus. Aut architecto commodi dolorem perferendis magni consectetur eos similique asperiores.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ipsam quas veniam beatae a repellat, magnam minima optio odit doloribus. Aut architecto commodi dolorem perferendis magni consectetur eos similique asperiores.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ipsam quas veniam beatae a repellat, magnam minima optio odit doloribus. Aut architecto commodi dolorem perferendis magni consectetur eos similique asperiores.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi ipsam quas veniam beatae a repellat, magnam minima optio odit doloribus. Aut architecto commodi dolorem perferendis magni consectetur eos similique asperiores.</p>
  </main>
  
  <aside class="a--side bg-light-gray pa3">
    <h2 class="mt0">Aside</h2>
  </aside>

  <footer class="a--footer bg-washed-red pa3 flex items-center">
    <h2 class="mv0">Footer</h2>
  </footer>

</section>
.my-grid {
  display: grid;
  grid-template-areas: "header    header"
                       "content     side"
                       "footer    footer";
  
  grid-template-rows: 4rem 1fr 4rem;
  grid-template-columns: 1fr 33.33%;
}

.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.