Subgridでここまで変わる！モダンなレイアウト設計とinline-gridの活用
はじめに
「カードのボタンを全部下揃えにしたいけど、タイトルの長さがバラバラで揃わない...」
そんな悩みを解決してくれるのが Subgrid です。
2023年〜2024年にかけて主要ブラウザで実装が進み、実用的に使えるようになってきました。
この記事では Subgrid の基本から実例、さらに一緒に覚えておくと便利な
inline-grid まで解説します。
Subgridとは？
Gridレイアウトの grid-template-columns や grid-template-rows に
subgrid を指定すると、
「親グリッドの定義をそのまま子グリッドで利用」できる仕組みです。
.child {
display: grid;
grid-template-rows: subgrid;
grid-row: span 2;
}
これにより、親と子のレイアウトが一体化し、Flexboxでは難しかった縦揃えや行間調整が簡単に実現できます。
実例①：カードレイアウトでボタンを揃える
よくある「カード型デザイン」で Subgrid
を使うと、タイトルや説明文の長さが違ってもボタン位置を揃えられます。
HTML①
<div class="cards">
<article class="card">
<h2>短いタイトル</h2>
<p>説明文が入ります。</p>
<button>詳しく見る</button>
</article>
<article class="card">
<h2>めちゃくちゃ長いタイトルが入るパターン</h2>
<p>説明文がちょっと長めに入ります。改行しても大丈夫。</p>
<button>詳しく見る</button>
</article>
</div>
CSS①（Subgridなし）
.cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.card {
border: 1px solid #ccc;
padding: 16px;
display: flex;
flex-direction: column;
}
.card button {
margin-top: auto; /* 頑張って下寄せ */
}
⚠️ この場合、ボタンは「カードごとに下寄せ」されるだけで、行ごとに揃わないことがあります。
CSS②（Subgridあり）
.cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3; /* h2, p, button の3つの行を使う */
border: 1px solid #ccc;
padding: 16px;
}
✅ Subgridを使うと、全カードでボタンの位置がピタッと揃うようになります。
👉 ポイント： span 3 は子要素の数（タイトル・説明文・ボタン）に合わせて指定します。
実例②：画像とテキストのリスト
リスト型のレイアウトでも Subgrid が便利です。
HTML②
<ul class="list">
<li>
<img src="thumb.jpg" alt="">
<p>説明テキスト</p>
</li>
<li>
<img src="thumb.jpg" alt="">
<p>説明テキストがちょっと長めに入るパターン</p>
</li>
</ul>
CSS②
.list {
display: grid;
grid-template-columns: 100px 1fr;
}
.list li {
display: grid;
grid-template-columns: subgrid;
grid-column: span 2;
gap: 8px;
}
✅ 親と同じカラム幅を使うので、画像とテキストの並びが全ての行で統一されます。
inline-gridとは？
最後に inline-grid についても触れておきます。
.box {
display: inline-grid;
grid-template-columns: repeat(2, auto);
}
inline-grid は inline-block
のグリッド版で、コンテンツ幅に合わせてインライン配置されます。
Subgridとは別物ですが、同じく「痒いところに手が届く」レイアウト機能として知っておくと便利です。
ブラウザ対応状況
- Chrome / Edge / Firefox / Safari (2023〜2024) で対応済み\
- IE は非対応、古い Safari も要注意\
-
Can I use Subgrid
で最新状況を確認できます
まとめ
- Subgrid → 親と子のレイアウトを一体化、行やカラムの揃えが超簡単\
-
inline-grid →
インライン要素として使えるグリッド、レイアウト幅を柔軟にコントロール
モダンCSSの進化で、もう「高さを揃えるためにJSで計算」なんて不要です。
次の案件からぜひ取り入れてみてください 💡
Discussion