おしゃれなタイル状レイアウト（Bento Grid）CSSジェネレーター
Apple製品の紹介ページなどで人気の、大小のボックスを隙間なく並べるモダンなグリッドレイアウト（Bento Grid）をCSS Gridで生成します。
プレビュー
{{grid_structure}}.bento-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* 1マスの高さを固定することで完璧に整列 */
grid-auto-rows: {{row_height}}px;
grid-auto-flow: dense;
gap: {{gap}}px;
width: 100%;
}
.bento-item {
background: {{item_bg}};
border-radius: {{radius}}px;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.5rem;
overflow: hidden;
}
/* 占有マスのパターン定義 */
.bento-item.size-large {
grid-column: span 2;
grid-row: span {{hero_span}};
}
.bento-item.size-wide {
grid-column: span 2;
}
.bento-item.size-tall {
grid-row: span 2;
}
/* レスポンシブ調整: スマホ・タブレット */
@media (max-width: 768px) {
.bento-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.bento-grid {
grid-template-columns: 1fr;
grid-auto-rows: auto; /* スマホではコンテンツに合わせる */
}
.bento-item,
.bento-item.size-large,
.bento-item.size-wide,
.bento-item.size-tall {
grid-column: span 1;
grid-row: span 1;
min-height: 150px;
}
}
.bento-item .bento-title { margin: 0; font-size: 1.1rem; color: #1e293b; font-weight: bold; }
.bento-item p { margin: 8px 0 0; font-size: 0.85rem; color: #64748b; }機能、使い方
- モダンなタイルレイアウト: Apple公式サイト等で多用される、大小のボックスを組み合わせたグリッドデザインを簡単に作成できます。
- 完璧な整列ロジック:
grid-auto-rowsをベースにしているため、複数のアイテムを積み上げても、隣の大きなアイテムと高さが 1px の狂いもなく一致します。 - 高密度充填 (dense): 隙間を自動で埋める設定が有効なため、パズルを組むように自由にサイズを混ぜても空白ができにくい設計です。
CSSプロパティの説明
grid-auto-rows
グリッドの1行あたりの「基本の高さ」を定義します。これの整数倍（+gap）で全ての高さが決まるため、Bento Grid の整列美の核となります。
grid-auto-flow: dense
サイズの異なるアイテムを並べた際にできる空白を、後続の小さなアイテムが自動で埋めるようにします。
grid-column/grid-row
個別のアイテムが「何列分」「何行分」の領域を占有するかを指定します。例えばspan 2と指定すると2マス分の領域を使用します。
