CSS Grid Level 2サブグリッドによるトラック継承と入れ子レイアウト整列

通常の入れ子グリッドは独自にトラックを計算するため、親グリッドとの行・列の整列は自動では共有されません。CSS Subgridを使うと、指定した軸で子グリッドが親のトラックを共有できます。入れ子コンポーネントの整列に役立つ場合がありますが、すべてのレイアウトやブラウザー対応の問題を解決したり、性能向上を保証したりするものではありません。

配置関係を示す概念画像です。下のHTML・CSS例の実行画面やブラウザーのキャプチャではありません。

1. `grid-template-rows`・`grid-template-columns: subgrid`でトラックを共有する

Subgridを指定すると、子グリッドは選択した行または列の軸で親のトラックを共有します。親で占めるspanが利用範囲を決め、その軸の子項目は親のトラックサイズ計算に参加できます。これにより入れ子の内容を親トラックに揃えられますが、すべての項目を自動的に同じ位置へ置く機能ではありません。結果は親のトラック定義、子のspan、コンテンツ量によって変わります。

2. 親トラックのサイズ計算、gap、名前付きライン

Subgridは、宣言した軸で子が親グリッド上に占める範囲（span）のトラックを使います。トラックサイズは子側で独立して決めるのではなく、親の定義から得ます。W3C仕様によると、サブグリッド内の項目は共有された親トラックの内在サイズ計算に参加できます。親のグリッド情報が子に伝わり、子の内容に基づくサイズ情報が親へ戻る関係です。

親の行・列gapは既定で引き継がれますが、子側から上書きできます。親の名前付きラインも参照できます。子のspan、共有する軸、項目の配置を確認し、実コンテンツで結果を検証してください。Subgrid化した軸に子専用の暗黙トラックは追加されません。

たとえば同じ親グリッド内のカードで、見出しと補足情報の行を揃えるケースを考えます。各カードが親の同じ行範囲を占め、その行軸をSubgridにすれば、カード内部の項目は共有された親トラックを使います。見出しの長さが異なると、その内容は共有トラックの内在サイズ計算に寄与し得ます。そのため親側は入れ子の内容を含めてトラックサイズを計算できますが、実際の寸法は親の他の項目やサイズ制約にも左右されます。

実装では、まず親で列や行のテンプレートを定義し、子が占める範囲を指定してから、共有したい軸だけにsubgridを設定します。カードのタイトル行を揃えたい場合は、行を共有する必要があります。列だけをSubgridにしてもタイトル行は共有されません。狭い画面で親の列数や子のspanを変える場合は、各ブレークポイントで同じ前提が保たれているか確かめてください。また、子側でgapを上書きした場合の余白と、非対応ブラウザー用の代替レイアウトも確認します。実データには最長の見出しと実際のフォントを使い、レイアウトを点検します。

3. 2行を共有する最小例と確認点

次の例では、各カードを親グリッドの2行にまたがって配置し、カード内の見出しと説明でその2行を共有します。長い見出しによって1行目の高さが増すと、2枚の説明文は同じグリッド線から始まります。

<style>
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.card {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  gap: 0.5rem;
  min-width: 0;
}
.card h2, .card p { margin: 0; }
@media (max-width: 38rem) {
  .cards { grid-template-columns: 1fr; }
}
</style>
<div class="cards">
  <article class="card">
    <h2>街なかの文化散策</h2>
    <p>歴史ある通りと小さな展示施設を訪ねます。</p>
  </article>
  <article class="card">
    <h2>川辺の生態系と季節の変化を観察する長いコース</h2>
    <p>川沿いの植生と遊歩道を見て回ります。</p>
  </article>
</div>

現在のChromeで、英語版HTMLの例を2つの幅で確認しました。720pxでは長い見出しが3行になっても、両方の説明文の開始位置は101.5pxで一致し、文書の横方向のはみ出しはありませんでした。390pxではカードがy=8pxとy=80pxに縦並びになり、文書のscrollWidthは390pxでした。確認したのは英語版のこの例と2つの幅だけです。韓国語版・日本語版、他のブラウザー、別の文章は未確認です。想定結果と、より広い文章での確認を区別してください。Subgrid非対応環境には別のレイアウトを用意します。

参考資料および公式リンク

• CSS Grid Layout Module Level 2 | W3C
• Subgrid - CSS | MDN