🧩
CSS Subgrid
親グリッドトラックを子に継承
グリッドレイアウトで子要素が独自のグリッドを持つ場合、親のトラック定義と同期しない問題がありました。Subgridはgrid-template-rowsやgrid-template-columnsにsubgrid値を指定して親トラックをそのまま継承します。
これにより、カードリストでタイトル、本文、ボタン領域が異なるカード間でも完璧に整列するレイアウトが実現できます。
適用方法
1
親要素にdisplay: gridとトラック定義を設定する
2
子要素にもdisplay: gridを適用する
3
grid-template-rows: subgridまたはgrid-template-columns: subgridを指定する
4
子要素のgrid-rowで親トラック範囲を指定する
メリット
- ✓ ネストされたグリッドで整列の一貫性が保証される
- ✓ 複雑なworkaroundなしでクリーンなコードで実装可能
デメリット
- ✗ 親トラックに依存し独立したレイアウト変更が難しい場合がある
- ✗ デバッグ時に親子トラック関係の把握が複雑になりうる
ユースケース
カードリストでヘッダー、本文、フッター領域の整列統一
フォームレイアウトでラベルと入力フィールドの整列維持