Back to UI design
Bento grid generator: drag, drop and copy the CSS
Drag boxes, set columns, gap and corner radius, and check the mobile layout. Copy HTML and CSS Grid code straight into your site or WordPress.
How to use
- Set the number of columns, gap and corner radius on the left.
- Click a box to change how many columns and rows it spans. Drag a box to reorder it.
- Switch to Mobile to see the layout tighten up, then copy the HTML and CSS into your site.
Frequently asked questions
What is a bento grid?
A layout that arranges content into boxes of different sizes, like a Japanese bento box; the most important box takes more space. Popular for feature pages and company profiles.
Does the code work in WordPress?
Yes. It is plain HTML and CSS Grid: paste it into a Custom HTML block or your theme's CSS file.
What happens on phones?
The code includes a small-screen rule: the grid drops to 2 columns and wider boxes shrink to 2 columns.