Page sections
Bento grid
A bento grid is a layout of rounded tiles in mixed sizes fitted into one rectangle, like a bento lunch box, used to show several features at once.
- Also called
- Bento box layout, Bento layout, Bento cards
- Spotted on
- 11 of 422 homepages
- Browse examples
- Feature sections →
What is a bento grid?
The bento grid spread through SaaS marketing sites as a way to show four to eight features without the monotony of identical cards. One or two large tiles carry the headline features; smaller ones fill the gaps with secondary points, stats or tiny UI fragments.
In our catalog it shows up mainly in body feature sections. Agentmail opens "Built for scale." with a four-cell bento where a wide "100M+" cell sits over a world map; Chargeflow mixes a large "4X ROI Guarantee" tile with smaller ones; Graphite uses a six-card bento on an all-black page.
Bentos work when the tile sizes mean something: the biggest tile is the most important feature. When every tile is a random size and holds a generic icon, the grid is decoration. They also need a plan for mobile, where the layout collapses into a single column and the size hierarchy disappears.
When to use a bento grid, and when not to
Use it for
- Uneven importanceOne feature clearly matters most and deserves a tile twice the size of the rest.
- Mixed content typesA stat, a screenshot crop, a short quote and an icon list can share one grid.
- Compact overviewYou need to cover five or six points in a single screen height.
Avoid it for
- Equal featuresIf every point is equally important, a plain card grid is clearer.
- Long explanationsTiles hold a title and a line; features that need a paragraph and a full screenshot need rows.
- Copying a trendA bento of generic icons looks dated quickly; it needs real content in the tiles.
Anatomy of a bento grid
- 1Section headingA short heading over the grid.
- 2Hero tileThe largest cell, spanning two columns or rows, for the main feature.
- 3Supporting tilesSmaller cells with a title, a line of copy and a small visual or number.
- 4GuttersEven gaps and shared corner radius that make mixed sizes read as one unit.
Common bento grid variants
1. Four-cell bento
One wide tile plus three smaller ones; the simplest form.
2. Six to eight cells
A fuller grid covering a platform's capabilities.
3. Dark bento
Tiles on a black page with subtle borders or glows, common on developer tools.
Spotted in our design reviews
Our reviews describe a bento grid on 11 of the 422 SaaS homepages in the catalog. A few of them:
A bento grid follows with 'Quick Start', 'Customer Communications', a large '4X ROI Guarantee' tile and a '100% Submission Rate' tile.
Chargeflow · Win-back flow, feature columns and bento grid
A bento grid follows with tiles like "22K Pixels upscaling", "Train", "64+ Models" and a large "Krea 2" image tile, then customer logos including Lego, Nike and Microsoft.
Krea · Carousel, model logos and bento grid
"Built for scale." opens a four-cell bento grid: a wide "100M+" cell over a world map, plus "Always On", "Instant Inboxes" and "Developer First" in monospace.
Agentmail · Stats, use cases and testimonials
"Everything you need to ship faster" heads a bento grid of six cards: "Never wait on review again" spans the width with a "Start stacking" pill, "A review experience built for teams" and "Don't miss a beat" share a row, "Smarter CI" and "One platform.
Graphite · Everything-you-need grid and stack graphic
"Up and running in days, not quarters." heads a bento grid: a navy "150+ integrations" tile with app icons, a lilac templates tile and a full-width pink security band with a "99% Uptime" tag.
Teamwork · Bento grid, resource columns and industries
"More Than a Sandbox." is a bento of four tiles, from "Environment Snapshots" to "Volumes".
Daytona · Runtime features, computer use, trust and pricing
The customer bento collapses to one column, starting with the quote from "Erik Dahl".
Tryreplicas · Mobile
The bento cards run in a single column.
Gumroad · Mobile
Often confused with
Bento grid vs. feature section
A feature section is the purpose; a bento grid is one way to lay it out.
Frequently asked
How does a bento grid work on mobile?
It stacks into a single column. Order the tiles in source so the most important comes first, because the size difference that signaled priority on desktop is gone.
Is the bento grid still a good pattern?
Yes when tiles hold real content (a screenshot crop, a number, a short demo). The pattern ages badly when it is only colored boxes with icons.