Skip to content
Musterli

Bento Grid

Rounded tiles of different sizes in a grid, without gaps. For feature sections, portfolios and social graphics, as CSS Grid, Tailwind or an image.

Open the generator

Runs right in your browser. Your graphics are made on your device.

Example motif made with the Bento Grid

Start from a preset

Pick a preset and it opens right in the editor, ready to adjust.

What is it?

A bento grid arranges content in tiles of different sizes, like the compartments of a bento box. The layout is popular for feature sections, portfolios, dashboards and social media graphics. The generator always fills the whole grid, without gaps.

How it works

Set columns, rows and the number of tiles you want. The smallest and largest tile control how varied the tiles get. Press Space for a new layout, or lock the layout and roll new colors only. Export as CSS Grid with HTML, Tailwind classes, SVG or an image.

Try the Bento Grid now

FAQ

Can I move single tiles?
No, Musterli is deliberately not a layout editor. Roll layouts until one fits and lock it. Columns, rows and tile sizes are set with the controls.
Does the grid work on phones?
Yes. Below 768 px the CSS arranges the tiles in reading order in fewer columns. Set how many under Columns on narrow screens.
Are there gaps in the grid?
Never. The grid is split along cell lines until it has the number of tiles you asked for. Every cell belongs to exactly one tile.
Do I need Tailwind for the code?
No. The CSS Grid + HTML export works in any browser without a framework. The Tailwind classes are an alternative for projects that use Tailwind.
Can I put text, icons and pictures into the tiles?
Yes. Click a tile in the preview, or pick it with Tab and the arrow keys. You can set a title, a subtitle, an icon, your own graphic and a background picture. Pictures stay in your browser: share links leave them out, and the code points to placeholder files you replace with your pictures.

Related generators

All generators in CSS effects and layouts