ベントグリッド（2×2）
ベントグリッドは、お弁当箱のように 大小のマスを組み合わせて並べる 近年人気のレイアウトです。このサンプルは display:grid で2列を作り、 grid-auto-rows:130px で行の高さをそろえています。
解説
ベントグリッドは、お弁当箱のように大小のマスを組み合わせて並べる近年人気のレイアウトです。このサンプルは display:grid で2列を作り、grid-auto-rows:130px で行の高さをそろえています。左上のヒーローは grid-row:span 2 で縦に2マス分、下段ワイドは grid-column:span 2 で横2マス分を占有し、残りのサブカードが自動で隙間を埋めます。gap:14px の余白と大きめの角丸（border-radius:14px）で、軽快でモダンな印象になります。
使う場面
- サービスや機能の紹介を強弱つけて見せるトップページ
- 主要KPIを大きく、補足指標を小さく置くダッシュボード
- ポートフォリオやギャラリーの不揃いな配置
マスの占有はBEM修飾子（--hero や --wide）の span 値で自由に変えられます。強調したいカードに大きな面積を割り当てるのが基本の考え方です。注意点として、モバイルでは2列のままだと窮屈になりがちなので、メディアクエリで1列へ切り替えると読みやすくなります。各カードは flex で中身を中央寄せしているため、テキスト量が少なくても見栄えが整います。情報の優先順位を面積で表す意識を持つと、ベントグリッドが活きてきます。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
カードの大きさはどう決めていますか
CSS Gridのspanで決めています。ヒーローはgrid-rowでspan 2を指定して縦に2マス分、下段ワイドはgrid-columnでspan 2を指定して横に2マス分を占有します。span値を変えれば、どのカードを大きく見せるかを自由に調整できます。
スマホで窮屈になりませんか
そのままだと2列のままで窮屈になりがちです。メディアクエリで画面が狭いときにgrid-template-columnsを1列へ切り替えると、各カードが縦に積み重なって読みやすくなります。