CSS Generator

.grid {
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-rows: 70px minmax(160px, auto) auto;
  grid-template-areas: 
    'header header'
    'leftbar main'
    'footer footer';
  column-gap: 20px;
  row-gap: 20px;
}

.page-header {
  grid-area: header;
}

.page-leftbar {
  grid-area: leftbar;
}

.page-main {
  grid-area: main;
}

.page-footer {
  grid-area: footer;
}

.content {
  color: #242424;
  background-color: #f25fff;
  font-weight: 600;
  text-align: center;
  box-sizing: border-box;
  height: 100%;
  padding: 10px;
}

<div class="grid">
  <header class="page-header">
    <div class="content">
      <p>Header</p>
    </div>
  </header>
  <aside class="page-leftbar">
    <div class="content">
      <p>Leftbar</p>
    </div>
  </aside>
  <main class="page-main">
    <div class="content">
      <p>Main</p>
    </div>
  </main>
  <footer class="page-footer">
    <div class="content">
      <p>Footer</p>
    </div>
  </footer>
</div>