Holy Grail Layout Sample （レスポンシブ）

HTML

<div class="container">
  <header class="header">header</header>
  <div class="left-side">left sidebar</div>
  <main class="main">main content</main>
  <div class="right-side">right sidebar</div>
  <footer class="footer">footer</footer>
</div>

CSS（40em 以上でマルチカラムレイアウト）

.container {
  display: grid;
  grid-template-columns: 1fr;
}
  
@media (min-width: 40em) {
  .container {
    grid-template: auto 1fr auto / minmax(150px, auto) 1fr minmax(150px, auto);
  }

  .header {
    grid-column: 1 / 4;
    min-height: 50px;
    background-color: #D4E8FA;
  }

  .left-side {
    grid-column: 1 / 2;
    background-color: #F7DADB;
  }

  .main {
    grid-column: 2 / 3;
    min-height: 150px;
    background-color: #CAF8D9;
  }

  .right-side {
    grid-column: 3 / 4;
    background-color:#FAF794;
  }

  .footer {
    grid-column: 1 / 4;
    min-height: 100px;
    background-color:#FBCA82;
  }
}

.header {
  min-height: 50px;
  background-color: #D4E8FA;
}

.left-side {
  background-color: #F7DADB;
}

.main {
  min-height: 150px;
  background-color: #CAF8D9;
}

.right-side {
  background-color:#FAF794;
}

.footer {
  min-height: 100px;
  background-color:#FBCA82;
}