CSS Gridで記事カードを並べると、カードの高さは揃っているのに、見出しやボタンの位置が微妙にズレることがあります。本文量やタイトルの長さが違うためです。
そこで使えるのがsubgridです。親グリッドの行や列を、子要素のグリッドでも使えるようにすることで、入れ子の中身を揃えやすくなります。
subgridでできること
- 親グリッドで定義した行や列を子要素でも使える
- カード内のタグ、見出し、本文、リンクの位置を揃えやすい
- 入れ子グリッドが親グリッドと別々にズレる問題を減らせる
- 記事一覧や商品カードのような反復UIと相性が良い
HTML
<section class="article-grid">
<article class="article-card">
<p class="article-card__tag">CSS</p>
<h2>Subgridでカードの見出し位置を揃える</h2>
<p>本文量が違っても、親グリッドの行に合わせて配置できます。</p>
<a href="#">詳しく見る</a>
</article>
<article class="article-card">
<p class="article-card__tag">Layout</p>
<h2>長いタイトルの記事カードでも崩れにくい</h2>
<p>カード内をsubgridにすると、タグ、見出し、本文、リンクの位置を揃えやすくなります。</p>
<a href="#">詳しく見る</a>
</article>
</section>CSS
.article-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
grid-template-rows: auto auto 1fr auto;
gap: 24px;
}
.article-card {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
gap: 12px;
padding: 20px;
border: 1px solid #d1d5db;
border-radius: 8px;
}
.article-card__tag {
width: fit-content;
padding: 2px 8px;
border-radius: 999px;
background: #00a3ff;
color: #fff;
font-size: 0.875rem;
font-weight: 700;
}
.article-card h2 {
font-size: 1.25rem;
line-height: 1.5;
}
.article-card a {
align-self: end;
}ポイント
親の.article-gridで4行を作り、カード側でgrid-row: span 4とgrid-template-rows: subgridを指定しています。これにより、カード内の各要素が親グリッドの行に沿って配置されます。
subgridを使わない方がいい場面
- カードごとに完全に自由なレイアウトにしたい
- 単純な縦並びだけで十分
- 親グリッドと中身の整列に関係がない
- 古いブラウザ対応をかなり強く求められる案件
WordPressテーマで使うなら
WordPressの記事カード一覧では、タイトルの長さ、抜粋の有無、アイキャッチ画像の比率が記事ごとに変わります。subgridを使うと、カードの中身を揃えるために無理な固定高さを入れずに済みます。
あわせて読みたい
参考資料
まとめ
CSSのsubgridは、記事カードや一覧UIの中身を揃えるときに強い機能です。すべてのGridで使う必要はありませんが、親グリッドと子グリッドの行・列を揃えたい場面では、かなり実務向きの選択肢になります。
