<div class="grid">
  <header class="grid__header">ヘッダー</header>
  <main class="grid__main">メイン</main>
  <aside class="grid__side">サイド</aside>
  <footer class="grid__footer">フッター</footer>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 320px;
}

.grid__header {
  background: #f8bbd0;
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.grid__content {
}

.grid__main {
  background: #d1c4e9;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.grid__side {
  background: #e6ee9c;
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.grid__footer {
  background: #b2ebf2;
  grid-column: 1 / 3;
  grid-row: 3 / 4;
}