Bento grids: when they work, when they don't

Sometime around the iPad Pro launch in 2022, Apple started using a grid of asymmetric cards, one big, two small, one wide, one tall, to communicate features. The internet called it a bento grid, and within a year every AI startup landing page had one.

Most of them shouldn't have. Bento is a powerful pattern, but it's a specific tool for a specific job, and using it in the wrong place makes a page look impressive on first scroll and incoherent on the second.

What bento is actually good at

Bento works when you have 3–6 distinct features that share a category but differ in weight. The big cell is your hero feature. The small cells are the supporting ones. The asymmetric layout encodes which features the team thinks matter most, without making you read a list.

Apple uses it for product capabilities (camera, chip, display, battery). Notion uses it for surfaces (docs, wiki, projects, AI). The shared category is what makes it cohere, you're not comparing apples to plumbing, you're comparing chambers of the same product.

What bento is bad at

Communicating a sequence

If your features have to be understood in order, "first you do A, then B, then C", bento scrambles the reading. Use a numbered list or a step diagram. The asymmetric grid invites the eye to jump.

Selling a single value prop

If your product is one sharp idea, bento dilutes you. You needed a headline and a screenshot. The bento adds noise pretending to add information.

Hiding that you have fewer features than you claim

If you have two real features and four marketing capabilities ("AI-powered", "enterprise-ready", "open API", "customizable"), the bento exposes the difference. The big cell looks substantive; the small cells look like filler. Better to ship two strong cards than six weak ones.

The shape rules nobody states

• The big cell carries the most visual weight, so it should carry the most important feature. If your secondary feature is in the big cell because it had a nicer screenshot, viewers will assume it's primary. Pick by importance, not by asset.
• Aspect ratios should vary, but corners should not. Same radius on every card, same border weight. The asymmetry is in the grid, not the chrome.
• Each card needs a label, a one-line claim, and at most one supporting element (an image, an icon, a tiny chart). Two supporting elements per card and the grid turns into a wall of text.
• No card should be skippable. If a card could be removed without weakening the page, remove it. The grid's job is editorial, each cell earned its slot.

When to ship a list instead

Reach for a numbered or iconographic feature list when your features are equal in weight, when they need to be read in sequence, or when there are more than six. Lists are also better when the audience is technical and you want the page to feel like documentation rather than marketing, devs trust lists, distrust bento.

Build one when you do need it

The bento section entry has the anatomy, grid math, card composition, the type scale that makes the big cell read as bigger than its real pixel count, plus a tuned prompt that produces a tasteful Apple-style grid in your stack. Use it when the pattern fits. Ignore it when it doesn't.