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

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

ライブデモ

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

マークアップ

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

<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;
}