Subgrid

概要

Grid レイアウト内のネストされた要素が親グリッドのトラックを参照できなかった問題を解決する。カードグリッドで各カードの内部要素を列全体で揃えることが可能になる。

対応ブラウザ

基本構文

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

実務での使いどころ

• カードグリッドの整列

  高さの異なるカードでも、見出し・本文・ボタンの位置を列全体で揃えられる。

• フォームラベルの整列

  複数カラムのフォームで、ラベルと入力欄の行を親グリッドに揃えて整然としたレイアウトを実現。

注意点

アクセシビリティ

• 視覚的な整列が変わっても DOM 順序には影響しない。

参考リンク

• MDN Web Docs — Subgrid
• Can I use — CSS Subgrid