Bento Grid とは？CSS Grid で弁当箱のようなレイアウトを作る
Bento Grid（弁当箱レイアウト）は、大きさの違う四角いブロックを、弁当箱の仕切りのようにすき間なく並べるレイアウトです。CSS では display: grid で列を決め、各ブロックに grid-column: span と grid-row: span で「何列分・何行分を使うか」を指定して作ります。
このツールでは、列数・行数・すき間を決め、プレビューのブロックをドラッグで動かしたり、右下のつまみで大きさを変えたりしながら形を作れます。王道レイアウト（12種）から始めることもでき、できあがった HTML と CSS はボタン1つでコピーできます。処理はブラウザの中だけで行い、設定がサーバーに送られることはありません。
生成したコードの使い方
- 形を決める。王道レイアウトから近いものを選ぶか、列数・行数・すき間を決めて、ブロックを追加・結合します。ブロックを選ぶと、横の結合・縦の結合・背景色・角丸を変えられます。
- HTML と CSS をコピーする。「HTML」と「CSS (Grid Styles)」の Copy ボタンを押します。HTML は
<div class="bento-grid">の中にbento-item item-1のようなブロックが並ぶ形で出力されます。 - ブロックに中身を入れる。貼り付けたあと、各ブロックに文章や画像を入れます。CSS には、タブレット幅（992px 以下）で2列、スマホ幅（576px 以下）で1列に並べ直す指定も含まれています。
プレビュー上部のボタンで、PC・タブレット・スマホでの並び方を切り替えて確認できます。
ブラウザ対応
| ブラウザ | display: grid |
グリッドでの gap |
|---|---|---|
| Chrome・Edge | Chrome 57 以降・Edge 16 以降 | Chrome 66 以降・Edge 16 以降 |
| Safari（Mac・iPhone） | Safari 10.1 以降・iPhone 10.3 以降 | 12 以降 |
| Firefox | 52 以降 | 61 以降 |
grid-column・grid-row の対応バージョンは display: grid と同じです。出典: MDN の互換性データ（browser-compat-data 8.1.2、2026年9月時点）。いま使われている主なブラウザはすべて対応しています。
よくある質問 (FAQ)
行の高さは中身で決まるため、中身が空のブロックは高さがほとんど無くなります。出力される CSS は列の数だけを決め、行の高さは指定していません。
文章や画像を入れれば高さが出ます。中身に関係なく高さをそろえたいときは、
.bento-grid に grid-auto-rows: 160px; のように1行の高さを足してください。
画面の幅が 576px 以下では1列に、992px 以下では2列に並び直します。出力される CSS にこの切り替えが含まれています。
タブレット幅ではブロックの結合を解いて同じ大きさで並べるので、PC で大きく見せたブロックも他と同じ大きさになります。
プレビューでブロックの右下のつまみをドラッグするか、選んだブロックの「横の結合」「縦の結合」を変えます。順番は、ブロックをドラッグして別の位置に落とすと、そこへ移動します。
ブロックは「新規追加」で増やし、「削除」で減らせます。
できます。「保存」ボタンでお使いのブラウザの履歴に残し、あとから呼び出せます。「URLでシェア」を押すと、今のレイアウトを開けるURLがコピーされます。
プレビューは「画像保存」で PNG 画像にもできます（PC 表示の状態が保存されます）。