subgrid

レイアウト・配置

親グリッドのトラック（行や列）を子グリッドで継承できる機能です。複雑なレイアウトの整列が簡単になります。

構文

Syntax

grid-template-columns: subgrid | grid-template-rows: subgrid

コード例

例 1

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.child {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}

実行結果

親グリッド

列1

列2

子1

子2

子3

子グリッドが親の列トラックを継承

例 2

.card-grid {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
}

実行結果

Header

Content

Footer

カードの高さを親グリッドの行に合わせて整列

💡 TIPS

カードレイアウトで高さを揃えるのに非常に便利。Flexboxでは難しい複雑な整列が可能。

ブラウザサポート

Firefox 71+, Safari 16+（Chrome未対応）

subgrid

構文

コード例

例 1

例 2

💡 TIPS

関連プロパティ

ブラウザサポート