<div class="site">
  <div class="top">top</div>
  <div class="main">main</div>
  <div class="aside">aside</div>
  <div class="footer">footer</div>
</div>
body {
  margin: 0;
}
.site {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 16rem;
  grid-template-rows: auto 1fr auto;
}
.top {
  background: blue;
  color: white;
  padding: 1rem;
  
  grid-column: span 2;
}
.footer {
  background: red;
  color: white;
  padding: 1rem;
  
  grid-column: span 2;
}
.aside {
  padding: 1rem;
  background: lime;
}
.main {
  padding: 1rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.