Bento grid
Also called: bento box layout, bento, mosaic grid.
A grid of boxes in different sizes that fit together neatly, like a bento lunch box. Big boxes for the main features, small ones for the rest.
Boxes of different sizes fit together in one grid, like a Japanese bento lunch box.
Bento
Say it in a prompt
Lay the features out as a bento grid: a 4-column grid with 12px gaps where the main feature spans 2×2, two others span 2 columns, and the rest are single cells, each with rounded corners and its own soft color. Seen on
- Stripe: Six product cards of different sizes sit together in one grid, each with a small live demo inside.
You might describe it as
- stripe's boxes of different sizes all in one grid
- grid with big and small boxes
- apple style feature boxes
Not to be confused with
- Card
A bento grid is the layout; each box inside it is usually a card.