Bento grid design examples

What is a bento grid?

A bento grid is a layout made of rectangular tiles of different sizes that fit together into one block, named after the compartments of a Japanese bento box. Each tile holds one idea: a feature, a number, an image or a short interaction. Apple's product pages and keynote summary slides made the style familiar, and it is now a standard way to present product features.

When should you use a bento grid?

Use it when you have several points of roughly equal weight and no strict reading order, such as a feature overview. Tile size sets importance, so the main feature gets the largest tile. It is a poor fit for a story that must be read in sequence, or for long text.

How do you make a bento grid work on mobile?

Design it on a simple column grid, often four or six columns on desktop, with tiles spanning whole columns and rows. On a phone the tiles stack into one or two columns, so each tile has to make sense alone and in any order. Keep the gap and the corner radius the same everywhere. That consistency is what makes the grid read as one object.

Where do these bento grid examples come from?

Most are bento sections and cards published on Layers, with bento components from the Framer marketplace and UI kits from UI8. Muzli follows more than 200 design sources and lists up to 60 matching pieces here, favouring recent work.