Bento Grid Generator

Create beautiful Bento box-style grid layouts inspired by Apple's design. Perfect for dashboards, portfolios, and modern web layouts!

Columns: 4

Gap: 16px

Presets

CSS Code

/* Bento Grid Container */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Grid Items */
.bento-item-1 {
    grid-column: span 2;
    grid-row: span 2;
    background: #667eea;
    border-radius: 16px;
    min-height: 100px;
}
.bento-item-2 {
    grid-column: span 1;
    grid-row: span 1;
    background: #f093fb;
    border-radius: 16px;
    min-height: 100px;
}
.bento-item-3 {
    grid-column: span 1;
    grid-row: span 1;
    background: #4facfe;
    border-radius: 16px;
    min-height: 100px;
}
.bento-item-4 {
    grid-column: span 1;
    grid-row: span 2;
    background: #43e97b;
    border-radius: 16px;
    min-height: 100px;
}
.bento-item-5 {
    grid-column: span 2;
    grid-row: span 1;
    background: #fa709a;
    border-radius: 16px;
    min-height: 100px;
}
.bento-item-6 {
    grid-column: span 1;
    grid-row: span 1;
    background: #ffecd2;
    border-radius: 16px;
    min-height: 100px;
}

HTML Code

<div class="bento-grid">
    <div class="bento-item-1"></div>
    <div class="bento-item-2"></div>
    <div class="bento-item-3"></div>
    <div class="bento-item-4"></div>
    <div class="bento-item-5"></div>
    <div class="bento-item-6"></div>
</div>

Features

Visual drag-free grid builder
Customizable column count
Adjust span for each item
Pre-made layout presets
Random color generator
Export CSS & HTML code

How to Use

1
Set the number of columns
2
Add grid items with + button
3
Click an item to adjust its span
4
Use presets for quick layouts
5
Copy CSS and HTML code

Frequently Asked Questions

What is a Bento Grid?

A Bento Grid is a layout pattern inspired by Japanese bento boxes, popularized by Apple. It features asymmetric grid items of different sizes.

How do column and row spans work?

Column span determines how many columns an item takes horizontally. Row span determines how many rows it takes vertically.

Can I use this with any framework?

Yes! The generated CSS uses standard CSS Grid, which works with React, Vue, vanilla HTML, and any other framework.

How do I make it responsive?

Add media queries to change the grid-template-columns value at different breakpoints.

Back to Design Tools