# subgrid

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

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

## 構文

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

## Tailwindでは

- `grid-cols-subgrid` → grid-template-columns: subgrid
- `grid-rows-subgrid` → grid-template-rows: subgrid

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 117+ / Firefox 71+ / Safari 16+ / Edge 117+

## コード例

### 例1: 子グリッドが親の列トラックを継承

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

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

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

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

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

## TIPS

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

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

AIは学習時期によって「subgridはFirefox限定」と古い情報を答えますが、Chrome 117（2023年9月）以降全ブラウザ対応済みです。またsubgridは行・列それぞれ個別に継承指定でき（grid-template-columns: subgridなど）、gapも親から継承されます（上書き可能）。「カード内の要素の高さを揃える」定番問題の最も正しい解です。

## AIへの依頼文例

- カード一覧で、各カードのタイトル・本文・ボタンの高さ位置を揃えたい。subgridで実装して
- このネストしたgridの列ずれをsubgridで親のトラックに揃えて

## 関連プロパティ

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