What is a bento grid?
A bento grid (named after the compartmented lunch box) is a tidy mosaic of tiles of different sizes. This one is the classic form: a featured square on one side and a 2×2 grid of smaller squares on the other. Each tile holds an image, a title and a caption, and can link anywhere — so the whole grid works as a visual menu.
When to use a bento grid
- Collections — a hero product beside four of its siblings.
- Feature overviews — the headline feature large, supporting ones small.
- Portfolios and case studies — one flagship piece, four more at a glance.
- Category navigation — five destinations on one screen.
How it works
The grid is a CSS grid of perfect squares: the featured tile spans two rows and two columns, the four small tiles fill a 2×2 block beside it. Captions overlay the image on a soft scrim — shown on hover, always, or hidden. Put the featured tile on the left or the right, add an optional intro heading above, and give any tile a link. On phones the tiles reflow into a single column.
Best practices
- Use square-friendly images; the tiles crop to a square.
- Put your strongest image in the featured tile.
- Keep titles to two or three words and captions to one line.
- If tiles link, make every tile a link — mixed behaviour confuses.
How to make a bento grid — free
Upload five images
The first is the featured tile; the rest fill the 2×2 grid.Write titles, captions and links
Choose the featured side and how captions show.Embed or download
Copy the embed code or save a self-contained HTML file — or build the whole story in Scrollytelling, free to start.
Templates that use a bento grid
Want a head start? These ready-made, fully-editable templates put the bento grid to work — customize one and publish in minutes.
Bento grid — frequently asked questions
Is the bento grid free?
Yes — customize and export it here with no account.
Can each tile link somewhere?
Yes — give any tile a URL and the whole tile becomes the link.
Can I show more than five tiles?
The bento layout is one featured square plus a 2×2 grid, so five tiles. Add a second grid below, or use a carousel for longer sets.
Is it responsive?
Yes — the tiles reflow into a single column on small screens, captions included.