subgrid で整列カードレイアウト
このスニペットは CSS Grid の subgrid を使い、タイトル・本文・リンクの長さがカードごとに違っても、各パーツの高さを横並びでぴったり揃えるレイアウトです。親の .sg-grid が列を作り、各カードは grid-template-rows:subgrid と grid-row:span 3 で親の行…
解説
このスニペットは CSS Grid の subgrid を使い、タイトル・本文・リンクの長さがカードごとに違っても、各パーツの高さを横並びでぴったり揃えるレイアウトです。親の .sg-grid が列を作り、各カードは grid-template-rows:subgrid と grid-row:span 3 で親の行を引き継ぎます。これにより、見出しが 1 行のカードと 2 行のカードが混在しても、本文の開始位置やボタンの底辺が一直線に整います。
使いどころ
- 料金プランや機能比較の 3 カラムカード
- ブログ記事一覧やお知らせカードで、文章量が不揃いなとき
- サービス紹介の特徴ブロックを美しく整列させたいとき
カラム数は grid-template-columns の repeat 値で変えられ、gap で間隔を調整します。狭い画面では @media で 1 列に折り返す設計です。注意点として、subgrid は比較的新しい仕様のため、古いブラウザでは行が揃わないことがあります。その場合でもカード自体は表示されるので、致命的に崩れない作りにしておくと安心です。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
subgrid に対応していないブラウザでは崩れますか
高さの自動整列は効きませんが、カード自体は通常のグリッドとして並ぶため、レイアウトが完全に壊れることはありません。新しめのブラウザでは揃った見た目になります。
カードを 4 列にしたいときは
親の grid-template-columns の repeat(3,1fr) を repeat(4,1fr) に変更してください。行の数を変える場合は grid-row:span の値も合わせて調整します。