grid-template-areas 名前でグリッドの区画を決める

<div class="page">
  <div class="head">見出し</div>
  <div class="side">側</div>
  <div class="main">本文</div>
</div>

.page {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas:
    "head head"
    "side main";
  gap: 0.5rem;
}
.head { grid-area: head; }
.side { grid-area: side; }
.main { grid-area: main; }
.page > div { background: #efeef8; padding: 0.5rem; }