CSS Gridの登場により、Webのレイアウト設計は劇的に簡単になりました。しかし、「Gridの子要素のさらに中にある子要素（孫要素）のレイアウトを、親のグリッドに沿って完璧に揃えたい」というケースでは、従来のCSS Gridだけでは対応が難しい課題がありました。

これを一発で解決するために導入されたのが、CSS Gridの追加仕様である 「Subgrid（サブグリッド）」 です。本記事では、Subgridの基本概念と、実務でよく遭遇するカード型レイアウトでの実践的な使い方を解説します。

1. Subgridとは？解決できる課題

従来のCSS Gridでは、グリッド線に沿って配置できるのは「直系の子要素（Grid Items）」だけでした。子要素の中にさらにグリッドを作成した場合、それは親のグリッド構造とは完全に独立したレイアウトになってしまいます。

例えば、以下のようなブログ記事の「カード型リスト」を作成する場合を考えます。

• 各カードは「アイキャッチ画像」「タイトル」「説明文」で構成される。
• タイトルの文字数がカードごとに異なる。

このとき、「タイトルの長さに関係なく、すべてのカードのタイトルの高さ、説明文の開始位置を完璧に揃えたい」 という要件が発生した場合、従来のCSSではJavaScriptで高さを計測して合わせるか、高さを固定値で制限するしかありませんでした。

Subgrid を使うと、カード内部の要素が、親である「カードリスト全体のグリッド線」をそのまま継承して利用できるようになります。

2. 実践！カードの高さを揃えるSubgrid実装例

実際に、カード内の各行の高さが他のカードと同期するレイアウトを実装してみましょう。

📄 HTML構造

<div class="grid-container">
  <!-- カード1 -->
  <div class="card">
    <img src="thumb1.jpg" alt="Thumbnail">
    <h3>短いタイトル</h3>
    <p>短い説明文が入ります。</p>
  </div>
  <!-- カード2 -->
  <div class="card">
    <img src="thumb2.jpg" alt="Thumbnail">
    <h3>非常に長いタイトル。複数行にわたって改行されます。</h3>
    <p>説明文が入ります。ここも改行されます。</p>
  </div>
</div>

🎨 CSSの実装

/* 親コンテナの指定 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* カード自体にグリッドを適用 */
.card {
  display: grid;
  /* 各カードは3行で構成されることを定義 */
  grid-template-rows: auto auto 1fr;
  /* 縦方向のグリッド線として親のグリッドを「継承（subgrid）」する */
  grid-row: span 3;
  row-gap: 10px;
}

/* 2026年現在のSubgrid対応記述 */
@supports (grid-template-rows: subgrid) {
  .card {
    grid-template-rows: subgrid;
  }
}

💡 コードの解説

• grid-row: span 3; により、各カードは親グリッドの「3行分」の領域を占有することを指定します。
• grid-template-rows: subgrid; を指定することで、カード内の画像、タイトル、説明文が、親グリッドのそれぞれの行にぴったりと吸着します。
• 結果として、カード2のタイトルが改行されて高さが伸びた場合、自動的にカード1のタイトルの高さも同期して伸びるようになります。

3. まとめ：Subgridが変えるWebデザインの未来

現在、SubgridはChrome、Firefox、Safariなどの主要なモダンブラウザで完全サポートされています。JavaScriptに頼ることなく、CSSだけで論理的に高さを揃えた美しいグリッドUIを実現できるため、ダッシュボード、ECサイトの製品カード、ブログの一覧画面などで積極的に採用していきましょう。