Subgridとは？ネスト要素同士を完全整列させるCSS Gridの最終兵器

2月 9, 2026 2月 9, 2026

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

カードUIを並べたとき、こんなモヤっとした経験はありませんか。
見出しの位置が微妙にズレる。
説明文の量が違って、ボタンの高さが揃わない。
デザイン上は一直線に並べたいのに、実装するとどうしても崩れる。

これまで多くの現場では、
高さをJavaScriptで揃えたり
無理やり余白を調整したり
Gridを諦めてFlexに逃げたり
と、どこか妥協した実装をしてきたと思います。

しかし、CSS Grid には
この問題を正面から解決するための最終兵器
が用意されています。

それが
Subgrid（サブグリッド）
です。

Subgrid を使えば、
ネストされた要素同士が
親のグリッド線をそのまま共有
できます。
カード内の見出し、本文、ボタンが、隣のカードとピシッと一直線に揃う。
しかも JavaScript は不要。

この記事では、Subgrid の基本概念から、なぜ「究極の整列術」と呼ばれるのか、そして実務でどんな場面に効くのかを、Web制作者目線でやさしく解説していきます。
グリッド整列に悩まされてきた方ほど、ぜひ最後まで読んでみてください。

Subgridとは何か

Subgrid は、CSS Grid の拡張機能です。
最大の特徴は、
子要素が親グリッドの行や列をそのまま使える
ことです。

これにより、「カードの中身だけズレる」問題を根本から解消できます。

通常の Grid では、
親と子のグリッドは完全に別物です。

その結果、
見出しの高さ
本文の量
ボタンの位置
が、カードごとに微妙にズレてしまいます。

Subgrid は、この「分断」をなくす仕組みです。

まず、親要素でグリッドを定義します。

.cards { 
 display: grid; 
 grid-template-columns: repeat(3, 1fr); 
 grid-template-rows: auto auto auto; 
}

次に、子要素側で subgrid を指定します。

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

これだけで、
カード内部が親の行構造をそのまま共有
するようになります。

Subgrid を使うと、カードUIは劇的に整います。

デザイン通りの「ピシッと感」が、CSSだけで実現します。

Subgridの最大の価値

高さ揃えのためのJavaScriptが不要になる

レイアウトの責務をCSSに戻せる
という点が、Subgrid の本質です。
保守性もパフォーマンスも、自然と向上します。

Subgrid が特に力を発揮するのは、次のようなUIです。

「整列が命」のUIほど、導入効果が分かりやすいです。

Subgrid は比較的新しい機能です。
実務では対応状況の確認が重要になります。

 @supports (grid-template-rows: subgrid) { /* Subgrid対応ブラウザ用 */ }

未対応環境では、従来の Grid や Flex をフォールバックとして用意すると安心です。

Subgrid は、
ネストされた要素同士を
完璧に整列させるための最終兵器
です。

カード内のズレに悩み
JSで高さ調整をしてきた方ほど
この価値を強く感じるはずです。

CSS Grid の真価を引き出す Subgrid。
これからのモダンレイアウト設計に、ぜひ取り入れてみてください。

この記事を書いた人

静岡県浜松市在住のフリーランスWEBデザイナー小瀧です。サイト制作、デザイン制作、SEO対策等も行っています。お気軽にお問い合わせください！業務委託も大歓迎です！