Subgrid
CSS グリッドレイアウトモジュールは、 subgrid の値を grid-template-columns および grid-template-rows に追加しています。このガイドでは、サブグリッドでできること、いくつかの使用例と、この機能で解決されるデザインパターンを詳述します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 117 | 117 | 71 | 16 | 117 | 16 | |
| CSS グリッドレイアウトモジュールは、 subgrid の値を grid-template-columns および grid-template-rows に追加しています。このガイドでは、サブグリッドでできること、いくつかの使用例と、この機能で解決されるデザインパターンを詳述します。 | 117 | 117 | 71 | 16 | 117 | 16 |
基本構文
CSS
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
}ライブデモ
実務での使いどころ
-
カードグリッドの整列
高さの異なるカードでも、見出し・本文・ボタンの位置を列全体で揃えられる。
-
フォームラベルの整列
複数カラムのフォームで、ラベルと入力欄の行を親グリッドに揃えて整然としたレイアウトを実現。
注意点
- subgrid は display: grid の子要素でのみ使用可能。
- Chrome 117 未満は非対応。
アクセシビリティ
- 視覚的な整列が変わっても DOM 順序には影響しない。