Bento Box グリッド（不揃いタイル）
大きさの違うタイルを隙間なく敷き詰める、お弁当箱のような Bento グリッド レイアウトです。CSS Grid で grid-template-columns:repeat(3,1fr) の 3 列と grid-template-rows:repeat(2,140px) の 2 行という土台を作り、その上で一部の…
解説
大きさの違うタイルを隙間なく敷き詰める、お弁当箱のようなBento グリッドレイアウトです。CSS Grid で grid-template-columns:repeat(3,1fr) の 3 列と grid-template-rows:repeat(2,140px) の 2 行という土台を作り、その上で一部のタイルだけ grid-column:span 2 や grid-row:span 2 を指定して横長・縦長に広げています。これにより均一なグリッドに動きが生まれ、情報密度を保ちながら視覚的な単調さを避けられます。
向いている用途
- サービスの機能紹介セクション
- ダッシュボードや統計の要約カード
- ポートフォリオやギャラリーの一覧
どのタイルを大きくするかは span の指定で自由に組み替えられ、強調したい要素を広げると視線を誘導できます。列数は repeat(3,1fr) の数字で、行の高さは 140px で調整します。タイルが重なったり隙間が空く場合は span の合計と行列数の整合を見直してください。スマートフォンでは 1〜2 列に減らすメディアクエリを足すと崩れにくくなります。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
特定のタイルだけ大きくする仕組みは何ですか
そのタイルに grid-column:span 2 や grid-row:span 2 を指定し、複数のグリッドセルにまたがらせています。span の数を変えれば占有する列・行の数を調整できます。
スマホで崩れないようにするには
メディアクエリで列数を repeat(2,1fr) や 1 列に減らし、各タイルの span 指定を見直すのが基本です。狭い画面では大きなタイルを縦並びにすると読みやすくなります。