Holy Grailは、Webで非常に一般的なレイアウトパターンです。 これは、ヘッダー、左側に固定幅のナビゲーションがあるメインコンテンツ領域、中央にコンテンツ、右側に固定幅のサイドバー、そしてフッターで構成されています。

聖杯はさまざまな方法を使用して達成されましたが、おそらく最近ではFlexboxを使用しています。 CSSグリッドレイアウトはさらに別の方法であり、ブラウザのサポートが向上した場合に最も適切で簡単な方法であることが証明されるはずです。 これは、フルページレイアウトを簡単に実現するために特別に設計されました。

ライブデモ

サポートしているブラウザを使用している場合は、このデモの動作をここで確認できます。 FixefoxとChromeでグリッドレイアウトを有効にする方法についてのクイックインストラクションは次のとおりです。

Holy Grail Layout Demo

マークアップ

マークアップは本当にシンプルで、レイアウトを作成するために必要な要素の量は最小限でセマンティックです。

<div class="container">
  <header>
    <!-- Header content -->
  </header>

  <nav>
    <!-- Navigation -->
  </nav>

  <main>
    <!-- Main content -->
  </main>

  <aside>
    <!-- Sidebar / Ads -->
  </aside>

  <footer>
    <!-- Footer content -->
  </footer>
</div>

グリッド

グリッド領域とfrユニットを使用して、コンテナにグリッドを定義する方法は次のとおりです。

.container {
  display: grid;

  grid-template-areas:
    "header header header"
    "nav content side"
    "footer footer footer";

  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;

  height: 100vh;
}

コンテナでheight:100vh (100%ビューポートの高さ)を使用して、グリッドを少なくともビューポートの全高まで拡張していることに注意してください。 グリッドの中央の行は1frの高さに設定されているため、必要に応じて余分なスペースを確保できます。

グリッドアイテム

グリッドアイテムは、grid-areaプロパティを使用してグリッドに配置するのが非常に簡単です。

header {
  grid-area: header;
}

nav {
  grid-area: nav;
  margin-left: 0.5rem;
}

main {
  grid-area: content;
}

aside {
  grid-area: side;
  margin-right: 0.5rem;
}

footer {
  grid-area: footer;
}

ボーナス:応答性を高める

メディアクエリを使用したり、グリッドコンテナのいくつかのプロパティを変更して、小さなデバイスですべてを1つの列にまとめたりするのは簡単です。

@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "nav"
      "content"
      "side"
      "footer";

    grid-template-columns: 1fr;
    grid-template-rows:
      auto /* Header */
      minmax(75px, auto) /* Nav */
      1fr /* Content */
      minmax(75px, auto) /* Sidebar */
      auto; /* Footer */
  }

  nav, aside {
    margin: 0;
  }
}

グリッドとフレックスボックス

グリッドはFlexboxに代わるものではなく、Flexboxは1次元配置とマイクロレイアウトに適したソリューションです。 グリッドとフレックスボックスのレイアウトを組み合わせるのは非常に簡単で、一緒にうまく機能するように設計されています。

たとえば、ヘッダーでフレックスボックスを使用して、ヘッダーコンテナ内の要素を水平軸に均等に分散させることができます。

header {
  grid-area: header;

  display: flex;
  justify-content: space-between;
  align-items: center;
}