Gridによるホーリーグレイルレイアウト

Holy Grailレイアウトは、古典的なWebデザインパターンです。ヘッダーとフッターを備えた全高のページで、中央に3列のセクション（左サイドバー、メインコンテンツ、右サイドバー）を配置します。以前はfloatで実現するのが非常に難しいことで知られていましたが、CSS Gridなら簡単に実装できます。

名前付きのテンプレート領域と行でレイアウトを定義します。grid-template-areasで視覚的な構造を対応付けます。3列3行（ヘッダーは全列にまたがり、フッターも全列にまたがり、中央の行は3列）によって、レイアウト全体を読みやすいASCII図で表現できます。

各子要素は、名前で領域を参照します。header { grid-area: header }、main { grid-area: main }、nav { grid-area: sidebar }、aside { grid-area: aside }、footer { grid-area: footer }のように指定します。Gridが要素を自動的に配置します。

中央の行では1frを使い、固定高さのヘッダーとフッターの後に残ったビューポートの高さをすべて埋めます。これにより、サイドバーとメインコンテンツが常にビューポートいっぱいに広がります。明示的な高さの計算は必要ありません。

モバイルでは、メディアクエリを使ってgrid-template-areasを1列の縦積みレイアウトに再定義します。ヘッダー、サイドバー、メイン、aside、フッターを縦方向に積み重ねます。DOMの順序は維持され、視覚的なGridテンプレートだけが変わります。Grid領域を使うと、レスポンシブな再構成を読みやすく記述できます。

タブレットでは、右側のasideを削除してmainを広げます。"header header" "sidebar main" "footer footer"に再定義し、grid-template-columns: 240px 1frを設定します。aside { display: none }を設定するか、領域定義でmainの下に移動します。

Gridトラック間にはgap: var(--spacing-4)で間隔を追加します。間隔を一貫させるため、パディングはGridコンテナーではなく各領域の内側に適用します。通常、ヘッダーとフッターには、Gridの最大幅の配置に合わせた独自の左右パディングを設定します。

メインコンテンツ領域自体をGridにすることもできます。たとえば、main領域の中に記事とサイドバーの2列を配置できます。ネストしたGridを使えば、複雑なクラス階層や深くネストした配置指定なしに、ページの外枠レイアウトの中にコンテンツレイアウトを作成できます。

ヘッダーをスティッキーにするには、header { position: sticky; top: 0; z-index: 10; }とします。Gridレイアウトでは、Gridの子要素に対するsticky配置も期待どおりに機能し、main、サイドバー、asideがその下でスクロールする間、ヘッダーが固定されます。

両方のサイドバーをスティッキーにできます。nav, aside { position: sticky; top: 0; height: 100vh; overflow-y: auto; }とします。メインコンテンツのスクロール中もサイドバーが表示され続けるため、中央だけがスクロールする3パネルのレイアウトを作成できます。

Holy Grailのような2次元のページ外枠レイアウトにはGridを使用します。Gridは、名前付きの行と列に要素を同時に配置することに優れています。Grid領域内の1次元のコンポーネントレイアウト（横方向のナビゲーション項目や縦方向のカードコンテンツなど）にはFlexboxを使用します。

レスポンシブなHoly Grailレイアウトで、grid-template-areasが特に便利なのはなぜですか？

CSS Gridを使うと、以前は実現が難しかったHoly Grailレイアウトを簡単に作成できます。grid-template-areasで領域に名前を付け、中央の行の1frでビューポートの高さを埋め、メディアクエリで領域マップを再定義してレスポンシブに折りたたみます。スティッキーヘッダーやサイドバーも、複雑さを増やさずに組み合わせられます。