Bento grids, and when asymmetry is a decision#
A bento grid is a layout of tiles at different sizes, borrowed from the compartments of a Japanese lunch box. The varied sizes are the whole point: the layout itself says which thing matters most. That only works when you can defend the choice.
What a bento grid contains#
- A featured tile carrying the headline capability or message
- Supporting tiles at one or two smaller sizes, not five
- Media, metrics or a live interface inside the tiles rather than text alone
- A consistent gutter and radius, which is what holds an irregular grid together
- A defined behaviour at each breakpoint, since a bento that simply stacks loses its hierarchy
The twelve bento grids#
- Bento Grid 1: a destination board with a filter row and a top-rated tile. Free.
- Bento Grid 4: a six-column travel board pairing one large destination tile with smaller ones.
- Bento Grid 2: a SaaS dashboard showcase covering deployment analytics, team activity, performance and integrations.
- Bento Grid 3: a services and credibility board for an agency.
- Bento Grid 5: a centre-weighted AI board built around one WebGL field of warped noise that turns toward the pointer.
- Bento Grid 6: a developer platform board driven by a token-bucket simulation feeding a live rate-limit graph and a throughput counter.
- Bento Grid 7: a retail board with a throwable collection rail on a native scroller, so keyboard, touch and zoom keep working.
- Bento Grid 8: an analytics board whose only motion is live cursors walking hand-placed routes, with the data left still.
- Bento Grid 9: a careers board with a wall of faces tipped in 3D beside published salary bands and a timed hiring process.
- Bento Grid 10: a board where the pointer completes each card: a note lands, a version stack fans, a grade wipes, an approval stamps.
- Bento Grid 11: a current-account board where every tile works, including a transfer that runs its four steps and a freeze switch that frosts the card.
- Bento Grid 12: a ticketing board for one night in a 198-seat room, with a seating plan filling seat by seat as the sale runs.
Bento grid or feature grid#
A feature grid treats every item as a peer, which is correct when they genuinely are. Reach for a bento only when one capability deserves more space than the others, because an asymmetric layout with an arbitrary winner reads as a mistake rather than a decision.
Tiles that are components, not screenshots#
Every tile in this collection is a working component. Bento 6 runs a real token-bucket simulation, Bento 11 runs a transfer through its actual four steps, Bento 12 fills a seating plan as its sale progresses. That is the difference worth paying for: a screenshot of a dashboard goes stale the day the product changes, and a live tile does not.
Types of bento layout#
- Feature showcase: capabilities at mixed sizes, the most common use on a SaaS landing page.
- Product showcase: screenshots, tools and integrations, where the interface is the argument.
- Statistics board: metrics and charts inside the grid, closer to a dashboard than a marketing section.
- Portfolio: image-led tiles where the work carries the page.
- Culture and careers: people, values and process, as in Bento 9.
Performance and motion#
The WebGL boards are the expensive ones. Treat them as a page centrepiece rather than something repeated down a long page, and keep them off documentation and application screens. Motion throughout respects the reduced-motion preference, falling back to the static composition.
Where a bento sits#
Usually as the main explanation section, after the hero and before pricing. It replaces a feature grid rather than joining one, since two asymmetric sections in a row cancel each other out.
