ベントーグリッド
ベントーグリッドは、弁当箱の仕切りのように大小のマスを敷き詰めるレイアウトです。 display:grid で3列を作り、特定のセルだけ grid-column:span 2 や grid-row:span 2 を与えて大きく占有させることで、単調にならないリズムが生まれます。
解説
ベントーグリッドは、弁当箱の仕切りのように大小のマスを敷き詰めるレイアウトです。display:grid で3列を作り、特定のセルだけ grid-column:span 2 や grid-row:span 2 を与えて大きく占有させることで、単調にならないリズムが生まれます。grid-auto-rows で行の高さを揃え、gap で均一な間隔を取っているため、要素数が変わっても整然と並びます。
使う場面
- サービスの機能紹介や特徴を一覧で見せるセクション
- ポートフォリオやギャラリーの目を引く配置
- ダッシュボードのカードを情報量に応じて大小に分けたいとき
どのセルを大きくするかは span の指定で自由に決められます。マスを増やす場合はHTMLに div を足すだけで自動的に流し込まれます。列数は grid-template-columns の repeat(3,1fr) を変更します。狭い画面では3列のままだと窮屈になりがちなので、メディアクエリで列数を減らす対応を加えると読みやすくなります。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
大きく見せるマスを変えるにはどうしますか
目立たせたいセルに grid-column span 2 や grid-row span 2 を指定します。占有する列数や行数を変えるだけでレイアウトのバランスを調整できます。
スマホでも3列のままですか
このサンプルは3列固定です。狭い画面で窮屈なら、メディアクエリで grid-template-columns の列数を2列や1列に減らすと読みやすくなります。