What is a bento grid?

A bento grid is a layout made of rectangular tiles in different sizes that fit together into one tidy grid. Some tiles span two columns, some span two rows, and the gaps between them are even.

The name comes from the Japanese bento box, a lunch box with compartments of different sizes. Apple made the style popular in product launch slides, and it spread fast across SaaS websites.

Why bento grids matter for conversion

Feature sections are hard. You have lots to say and visitors have little patience.

A bento grid lets you show many features in one compact block without it feeling like a list. Size does the ranking for you: the biggest tile holds your most important feature, and smaller tiles hold the supporting ones.

That’s visual hierarchy at work. Visitors can see what matters most before they read a word, then pick the tiles that match their problem.

What goes in a bento tile

Each tile works best as a small self-contained story:

A short heading that names the benefit
One line of supporting copy
A visual: a cropped product screenshot, a small animation, a number or an icon

The large tiles can carry richer visuals, like a live chart or a short product clip. Small tiles might just be a stat or an integration logo.

Bento grid vs card grid

	Bento grid	Card grid
Tile sizes	Mixed, some span rows or columns	All the same
Shows priority	Yes, through tile size	No, everything looks equal
Best for	A small set of features with a clear lead	Long, equal lists like integrations or blog posts
Harder part	Planning a layout that still works on mobile	Avoiding a dull, repetitive look

If every item really is equal, use a card grid. If you want one or two things to stand out, a bento grid does it better.

Bento grid best practices

Lead with your biggest tile. Put the feature that wins deals in the largest space, top left or centre.
Keep the grid strict. Even gaps and aligned edges are what make it feel calm. Uneven spacing makes it look broken.
Use real product visuals. Abstract illustrations in every tile tell buyers nothing about your product.
Plan the mobile order. Decide which tile comes first when the grid stacks, rather than leaving it to chance.
Build tiles as components. A design system with a few tile types (stat, screenshot, quote) keeps the grid consistent as features change.

Common bento grid mistakes

Too many tiles. Eleven small boxes is a puzzle, not a layout. Six to eight tiles is usually plenty.
Same weight everywhere. If every tile has a bold heading, big image and bright colour, the grid loses its hierarchy.
Heavy animations in every tile. They slow the page and can hurt Core Web Vitals. Animate one or two tiles, not all of them.
Text that only works at desktop width. Tiles squeezed on a tablet can wrap headings badly. Test the in-between sizes too.

Questions about bento grid

Why is it called a bento grid?

It is named after the Japanese bento box, a lunch box split into compartments of different sizes. The layout copies that look: separate boxes of different sizes fitted neatly together.

How do you make a bento grid in CSS?

CSS Grid is the usual tool. You define a grid of columns and rows, then let some tiles span two columns or two rows using grid-column and grid-row. On small screens you collapse it to one or two columns.

Is a bento grid good for mobile?

It works if you plan for it. On a phone the tiles usually stack into a single column, so put them in order of importance and make sure each tile still makes sense on its own.