Content & display

Bento Grid

Q: How do I implement a Bento Grid?

Build a features bento: CSS grid repeat(4, 1fr), hero tiles span 2 columns and 2 rows, supporting tiles span 1. On mobile collapse to one column. Keep DOM order matching reading order.

One strict grid with tiles of mixed spans—like a bento box filled edge to edge.

Also known as bento layout · mixed tile grid · feature mosaic

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Bento Grid".

Build a features bento: CSS grid repeat(4, 1fr), hero tiles span 2 columns and 2 rows, supporting tiles span 1. On mobile collapse to one column. Keep DOM order matching reading order.

Anatomy:
- grid track: Shared row/column rhythm—unlike free-height masonry.
- span: Tiles occupy 2×1, 2×2, etc.
- cell / tile: Content should fit the span; avoid runaway height.

Preferred API / pattern: `CSS Grid spans / Tailwind col-span utilities`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: grid-area reordering vs DOM
○Avoid: Uncontrolled content height in a fixed span
○Avoid: Four-column bento on a phone

In plain wordsHow people search for it

“Apple-keynote style tiles some large some small in one grid”“a lunchbox of different-sized feature cards”“one grid where hero tiles span two cells”

AnatomyOpen for part names

grid track: Shared row/column rhythm—unlike free-height masonry.
span: Tiles occupy 2×1, 2×2, etc.
cell / tile: Content should fit the span; avoid runaway height.

How to write itOpen for stack patterns

Web (HTML/CSS)display: grid + grid-column/row span

React + Tailwind + shadcn/uiCSS Grid spans / Tailwind col-span utilities

SwiftUIGrid + gridCellColumns

Ant Design<Row>/<Col span> or raw CSS Grid

Notes

Masonry has free heights; bento keeps a real grid and only varies span. Great for feature showcases; bad for infinite UGC. Don’t reorder tiles with grid-area in ways that break DOM/tab order. Collapse spans responsively on small screens.

Common mistakesHumans and models trip here

grid-area reordering vs DOM: tab and SR order diverge.
Uncontrolled content height in a fixed span: tiles blow the rhythm—that’s masonry territory.
Four-column bento on a phone: unreadable—stack.

More failure symptoms on AI broke it.

Related patterns

Masonry LayoutEqual-width, variable-height cards packed into columns with no shared row line.CardA contained surface grouping related content and actions as one unit.Grid SystemSplit the page into N equal columns (usually 12) and size blocks by how many columns they span.

Spotted a wrong name or missing pattern?

Message on X