# 聖杯レイアウト（Grid）のCSS実装

> ヘッダー・サイドバー・メイン・フッターの全体骨格をgrid-template-areasで組む定番構成。エリア名の並びがそのまま画面の設計図になります。

- カテゴリ: レイアウトパターン
- URL: https://www.css-dictionary.com/recipes/holy-grail/

## HTML

```html
<div class="layout">
  <header class="area-header">ヘッダー</header>
  <nav class="area-nav">ナビ</nav>
  <main class="area-main">メインコンテンツ。この骨格の中に各ページの中身が入ります。</main>
  <aside class="area-aside">サイド</aside>
  <footer class="area-footer">フッター</footer>
</div>
```

## CSS

```css
.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 90px 1fr 90px;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  min-height: 300px;
}

.area-header { grid-area: header; }
.area-nav    { grid-area: nav; }
.area-main   { grid-area: main; }
.area-aside  { grid-area: aside; }
.area-footer { grid-area: footer; }

/* 見た目（デモ用） */
.layout > * {
  padding: 12px;
  background: #fff;
  border: 1px solid #e2d8c2;
  border-radius: 6px;
  font-size: 13px;
}

/* 幅が狭いときは1カラムに畳む */
@media (max-width: 480px) {
  .layout {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}
```

## 仕組みの解説

grid-template-areas は「エリア名を文字で並べた行」がそのまま画面のレイアウト図になるプロパティです。各要素は grid-area でエリア名を名乗るだけで配置され、HTMLの記述順と表示位置が独立します。レスポンシブ対応もメディアクエリ内でareasの文字列を書き換えるだけで、要素の移動が完結します。中央行を1frにすることでメインが余白を吸収します。

## 実装のポイント

エリア名の並びは行ごとに列数を揃える必要があります（揃っていないと定義全体が無効になります）。

## AIに依頼するときの文例

grid-template-areasを使った聖杯レイアウト（ヘッダー・左ナビ・メイン・右サイド・フッター）を作ってください。狭い画面ではメディアクエリでareasを書き換えて1カラムに畳んでください。

## 使っているプロパティ

- [display-grid](https://www.css-dictionary.com/property/display-grid.md)
- [grid-template-areas](https://www.css-dictionary.com/property/grid-template-areas.md)
- [grid-template-columns](https://www.css-dictionary.com/property/grid-template-columns.md)
- [gap](https://www.css-dictionary.com/property/gap.md)