レスポンシブサンプル

<div class="container">
  <header class="header">header</header>
  <main class="content">content</main>
  <div class="sidebar">side bar</div>
  <footer class="footer">footer</footer>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 40em) {
  .container {
    /* 列を定義 */
    grid-template-columns: 1fr 240px ;
    /* 行を定義 */
    grid-template-rows: 100px minmax(200px, auto) 120px;
    /* エリアを定義 */ 
    grid-template-areas: 
      "header  header"
      "content sidebar"
      "footer  footer";
    gap: 20px;
  }

  /* 各エリアに名前を指定 */
  .header {
    grid-area: header;
  }
  .content {
    grid-area: content;
  }
  .sidebar {
    grid-area: sidebar;
  }
  .footer {
    grid-area: footer;
  }
}