# grid-template-areas

> グリッドエリアに名前を付けて、視覚的にレイアウトを定義できるプロパティです。文字列でエリア名を並べることで、直感的で保守性の高いグリッドレイアウトを実現できます。

- カテゴリ: レイアウト・配置
- URL: https://www.css-dictionary.com/property/grid-template-areas/

## 構文

```css
grid-template-areas: "<area-name> <area-name> ..." ...
```

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 57+ / Firefox 52+ / Safari 10.1+ / Edge 16+

## コード例

### 例1: 3行3列のグリッドで、上部にヘッダー、左にサイドバー、中央にメイン、右にアサイド、下部にフッターを配置する典型的なWebレイアウト例です。エリア名（header, sidebar, main, aside, footer）がどの位置に割り当てられるかを視覚的に定義できます。

```css
.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
```

### 例2: 1行目は左にロゴ、右2つ分にナビゲーション、2行目はヒーローエリアが3列分、3行目は左2つ分にコンテンツ、右にサイドバーを配置するレイアウト例です。エリア名を使うことで、HTML構造とCSSレイアウトの対応が直感的に分かります。

```css
grid-template-areas:
  "logo nav nav"
  "hero hero hero"
  "content content sidebar";
```

## TIPS

レイアウトが視覚的に理解しやすい。メディアクエリで簡単に変更可能。

## AIがよく間違えるポイント

AIはgrid-template-areasの制約（各行の列数が全行で一致、同名エリアは矩形のみ）を破った無効テンプレートを生成することがあります。1つでも規則違反があるとテンプレート全体が無効になり黙って崩れるので、行の列数と矩形性を必ず確認してください。空セルはピリオド（.）です。

## AIへの依頼文例

- ヘッダー・サイドバー・メイン・フッターのレイアウトをgrid-template-areasで視覚的に定義して、スマホでは並び替えて

## 関連プロパティ

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