カードの高さズレに悩む日々が終わる！CSS「Subgrid」で親のグリッド線を完全同期する技

📖 推定読了時間：約6分

Webサイトで横並びの「カード型UI（記事一覧や料金プランなど）」を作るとき、フロントエンド開発者が長年頭を抱えてきたのが「隣り合うカード同士の各パーツの高さが微妙にズレてしまう問題」です。

あるカードはタイトルが1行なのに、隣のカードはタイトルが3行ある――。すると、その下にある本文や「購入する」ボタンの配置位置が上下にガタガタとずれてしまい、見た目の美しさが台無しになってしまいます。これまではFlexboxの margin-top: auto でボタンだけを下端に無理やり揃えたり、JavaScriptで要素の高さを測って揃える泥臭いハックが使われてきました。

しかし、主要ブラウザ（Chrome、Safari、Firefox、Edge）のすべてで完全サポートされたCSSの新機能「Subgrid（サブグリッド）」を使えば、CSSをたった数行書くだけで、入れ子になった子要素が親のグリッド線に磁石のようにカチッと吸着して完全同期します。もう面倒な高さ合わせに悩む必要はありません。

従来のCSS Gridが抱えていた「入れ子要素の独立性」

CSS Gridは2次元（縦と横）のレイアウトを直感的に構築できる素晴らしい機能ですが、従来の仕様には大きな制約がありました。それは「グリッドの定義は、直下の子要素にしか適用されない」という原則です。

親要素（カードコンテナ）に display: grid をかけて複数のカードを横に並べることは簡単です。しかし、各カードの「内部（孫要素）」にある画像、見出し（<h3>）、本文（<p>）、ボタン（<button>）は、それぞれ独立した新しいレイアウト文脈を持ってしまいます。

その結果、左のカードのタイトルが長くなって行が高くなっても、右のカードのタイトルはその高さの変化を知ることができません。各カードがバラバラの高さで内部パーツを配置するため、水平方向の美しいベースラインが崩壊してしまっていたのです。

2次元レイアウトを自在に操るCSS Gridの基礎から最新のデザインパターンまでを体系的に習得したいエンジニアには、実務で使える実践テクニックが満載の モダンCSSグリッドデザインパターン設計ハンドブック が手元にあると非常に心強いです。Subgridのトラック継承ルールが直感的に理解できます。

Subgridの魔法：親のグリッド線に子要素を「直結」する

Subgridの指定方法は驚くほどシンプルです。子要素に対して自前のグリッドトラックを定義する代わりに、親のトラックをそのまま使い回す「subgridキーワード」を指定するだけです。

具体的なコードは以下のようになります。

/* 親コンテナ：カード全体の並び */
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-template-rows: auto 1fr auto; /* 見出し、本文、ボタンの3行 */
  gap: 20px;
}

/* 子要素（各カード）：親の3行をそのまま使う */
.card {
  display: grid;
  grid-row: span 3; /* 親の行トラックを3つ分またぐ */
  grid-template-rows: subgrid; /* 親の行グリッドを完全継承！ */
}

各カードに grid-row: span 3; と grid-template-rows: subgrid; を指定するだけで、カードの中の見出し（h3）、本文（p）、ボタン（button）が、親コンテナで定義された共通のグリッド線に自動配置されます。どれか1つのカードでタイトルが3行になれば、自動的にすべてのカードのタイトル行が同じ高さに押し広げられ、本文とボタンの開始位置が完璧に揃うのです。

画面幅やコンポーネント自身のサイズに応じて柔軟にレイアウトを組み替えるレスポンシブWebデザインを極めたい方は、コンテナクエリの基本から実戦パターンを詳解した CSS Container Queries実践レスポンシブデザイン設計 を併せて学ぶと、モダンCSSの表現力が飛躍的に高まります。

主要ブラウザで完全利用可能になった「Baseline」技術

「でも、古いブラウザで動かないんじゃないの？」と心配する声もあるかもしれません。しかし、Subgridはすでにウェブ標準のBaseline（全ブラウザ対応済み）となっています。

• Firefox：バージョン71（2019年）から先行サポート
• Safari：バージョン16（2022年）でサポート
• Chrome / Edge：バージョン117（2023年秋）で正式サポート完了

現在流通しているモダンブラウザのシェアはほぼ100%カバーされており、商用のプロダクション環境であっても何の躊躇もなく導入できる段階に達しています。

まとめ：CSSは「ハックの時代」から「標準仕様の時代」へ

かつてWebデザイナーやエンジニアを悩ませた「高さ不揃い問題」は、Subgridという極めて洗練された標準仕様によって、過去のものとなりつつあります。

無駄なラッパー要素を増やしたり、パフォーマンスに悪影響を与えるJavaScriptのDOM監視を走らせる必要はもうありません。親のグリッド線を子要素へそのまま通すという直感的なSubgridのパワーを活用して、すっきりと美しい、保守性の高いモダンWebデザインを実現してみてください。