# Bento Grid

> A tight grid of rounded, unequal-sized panels — each a mini-poster for one feature — arranged like a Japanese bento box.

- Category: Digital era
- Era: 2023–present
- Origin: Apple keynote feature slides, widely popularised in 2023
- Lesson: https://design.dawit.dev/styles/bento-grid
- Try it: https://design.dawit.dev/styles/bento-grid?style=bento-grid

## Where it came from

Apple's marketing team began using a dense grid of feature tiles in iPhone and iPad keynotes, with each tile showing one capability through illustration, demo screenshot or typographic statement. The pattern spread to landing pages and portfolios in 2023, driven by Framer and Webflow templates. The name references the Japanese bento box, where different foods sit in separated, snug compartments. The style rewards a content-first approach because each cell must be strong on its own.

## How to spot it

- Asymmetric grid of rectangles that span different column and row counts
- Large, consistent corner radii across all cells
- Dark background; each cell its own distinct colour or illustration
- One main message per cell — icon, screenshot or bold type

## Strengths

- Communicates multiple features without a long scroll
- Each cell is independently shareable as a visual
- Looks sophisticated without much animation

## Weaknesses

- Already strongly identified with Apple marketing and no-code tools
- Empty cells are painful — every cell must earn its space
- Mobile reflow of the asymmetric grid is almost always weaker

## In the wild

- Apple iPhone feature pages
- Vercel's features section
- Framer template gallery circa 2023

## Use it when

Product landing pages with five or more distinct features that each deserve a visual moment.

## Related styles
[Card UI](https://design.dawit.dev/styles/card-ui.md), [Dark / OLED](https://design.dawit.dev/styles/dark-oled.md), [Apple HIG](https://design.dawit.dev/styles/apple-hig.md)