# display: grid

> 要素をグリッドコンテナに変換し、子要素（グリッドアイテム）を2次元レイアウト（行と列）で配置できるプロパティです。複雑なレイアウトを直感的に実現でき、レスポンシブデザインにも最適です。

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

## 構文

```css
display: grid
```

## Tailwindでは

- `grid` → display: grid
- `inline-grid` → display: inline-grid

## ブラウザ対応

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

## コード例

### 例1: 3列の等幅グリッドレイアウト。1frは利用可能な空間を等分

```css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
```

### 例2: サイドバー付きの全画面レイアウト。固定幅サイドバーと可変メインエリア

```css
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
```

### 例3: レスポンシブグリッド。最小250pxで自動的に列数を調整

```css
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

### 例4: グリッドエリア名を使った直感的なレイアウト定義

```css
.card-grid {
  display: grid;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
  grid-template-columns: 200px 1fr;
  gap: 1rem;
}
```

## TIPS

2次元レイアウトならGrid、1次元ならFlexboxを選択。repeat()、minmax()、auto-fit/auto-fillでレスポンシブ対応が簡単。grid-template-areasで視覚的にレイアウトを定義できる。

## よくある間違い

grid-template-columnsを指定しないと1列になる。frとpxを混在させる際のサイズ計算に注意。grid-areaの名前にハイフンやアンダースコアを使うとエラーになる場合がある。

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

AIはgrid一発で組める場面でflexの入れ子を量産しがちです。カード一覧や2次元配置はgrid+gapの方が簡潔です。またgrid-template-areasによる視覚的なレイアウト定義をAIはあまり提案しないので、明示的に求めると保守しやすいコードになります。

## AIへの依頼文例

- このflexの入れ子で組まれたレイアウトを、gridで簡潔に書き直せるか検討して
- ヘッダー・サイドバー・メイン・フッターの構成をgrid-template-areasで実装して

## 関連プロパティ

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