display: grid

レイアウト・配置

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

構文

Syntax

display: grid

コード例

例 1

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

実行結果

3列等幅グリッド - grid-template-columns: 1fr 1fr 1fr

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

💡 1fr = 利用可能な空間を等分。自動で行が作成される

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

例 2

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

実行結果

サイドバーレイアウト - grid-template-columns: 250px 1fr

Header

Sidebar

Main Content

Footer

💡 固定幅サイドバー + 可変幅メインエリア。ヘッダー・フッターは全幅

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

例 3

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

実行結果

レスポンシブグリッド - repeat(auto-fit, minmax(120px, 1fr))

Card 1

Card 2

Card 3

Card 4

Card 5

💡 画面幅に応じて自動的に列数を調整。最小90pxを保証

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

例 4

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

実行結果

グリッドエリア - grid-template-areas で直感的レイアウト

Header

Side

Main

Footer

💡 エリア名でレイアウトを定義。視覚的で分かりやすい

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

💡 TIPS

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

⚠️ よくある間違い

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

ブラウザサポート

IE11+（一部制限あり）, 全モダンブラウザ

display: grid

構文

コード例

例 1

例 2

例 3

例 4

💡 TIPS

⚠️ よくある間違い

関連プロパティ

ブラウザサポート