Skip to content

  • VisualizationPage · Index
  • What’s newPage · Latest additions
  • Styles indexPage · Home
  • Compare stylesPage · Side by side
  • Patterns indexPage · Index
  • Articles indexPage · Index
  • Folio design systemPage · House system
  • Folio FoundationsPage · House system
  • Folio ComponentsPage · House system
  • Folio PatternsPage · House system
  • Folio MotionPage · House system
  • Folio ExamplesPage · House system
  • Folio ButtonsPage · Component
  • Folio Text fieldsPage · Component
  • Folio SelectPage · Component
  • Folio Checkboxes & switchesPage · Component
  • Folio Radio groupsPage · Component
  • Folio TabsPage · Component
  • Folio MenusPage · Component
  • Folio DialogsPage · Component
  • Folio TooltipsPage · Component
  • Folio Breadcrumbs & paginationPage · Component
  • Folio CardsPage · Component
  • Folio Badges & avatarsPage · Component
  • Folio Data tablesPage · Component
  • Folio Progress & loadingPage · Component
  • Folio FeedbackPage · Component
  • Folio Empty statesPage · Component
  • Folio MediaPage · Component
← UI patterns

Bento Grid

Content arranged into rounded, card-like compartments of different sizes on one shared grid, where size encodes priority.

Light register. The 2x2 hero sets the entry point; one accent cell carries the priority item; every cell shares one radius and gutter.
Dark register, the developer-tool dialect. Same size-as-hierarchy rule on a charcoal tray.

Behavior

Keyboard

A bento grid is mostly a visual arrangement, so its accessibility hinges on one thing: keeping the reading and focus order matching the visual priority. The dense-packing tricks that make bento look effortless are exactly what scramble that order if used carelessly.

Parts

The grid

A single multi-column, multi-row grid (commonly built with CSS Grid template areas or column/row spans). Every cell snaps to it, which is what holds the composition together as one unit rather than a loose pile of boxes.

Cells (compartments)

Self-contained tiles that span different track counts (1x1, 2x1, 2x2). Each holds one idea: a stat, a feature, an image, a quote. Rounded corners and a surface fill give each its boxed identity.

The hero cell

The largest compartment, carrying the headline message or primary visual. Its size is the first thing the eye lands on, so it sets the reading entry point for the whole grid.

The gutter

A single consistent gap between every cell. Uniform spacing is what makes differently sized cells still feel like one tray; uneven gaps break the bento read.

States

Responsive reflow

A bento grid reflows by merging and restacking cells, not by collapsing every cell into identical full-width boxes. Define how spans change at each breakpoint: the 2x2 hero might become 2x1, then 1x1, while small cells stack. Test that the priority order survives the collapse.

Interactive cells

When a whole cell is a link or button, the entire compartment should be the hit target, with a clear hover and focus state on the cell, not just its inner text. Keep one action per cell so the target is unambiguous.

Media cells

Cells holding an image or video should crop to fill (object-fit: cover) so the tile stays flush, and any overlaid text needs a scrim or gradient behind it to hold contrast against an unknown image.

Auto-placement caveat

grid-auto-flow: dense backfills gaps by pulling later cells forward, which visually tidies the grid but reorders cells away from source order, decoupling what you see from the DOM (and tab/read) order. Prefer explicit placement when order matters.

References

A schematic bento grid of grey rounded cells: a large 2x2 hero cell at top left, two 1x1 cells and a 2x1 wide cell to its right, and two 1x1 cells below, all on one even gutter.
The bento recipe, rendered liveSuperdesign
Apple Mac promotional bento grid: a central dark M2 Max chip tile surrounded by rounded stat tiles for 96GB memory, 67 billion transistors, 20 and 30 percent gains, 400GB/s bandwidth and more.
Apple's Mac bento infographicApple (via freeCodeCamp)
An Apple keynote stage showing a wall of differently sized rounded feature tiles on a neutral grid, with an Apple Intelligence label across the center and app screenshots in the surrounding cells.
Apple Intelligence keynote wallApple (via Banani) · 2024

Use it

Figma
Build the tray with Auto Layout grid
  1. Create a frame and apply the Auto Layout grid (wrap) so children flow into rows; set a single gap value to act as your gutter.
  2. Make each cell a component with Auto Layout, a fixed corner radius (try 20px), and a neutral fill plus a 1px hairline stroke.
  3. Give wider cells a larger fixed width (or column span) so size reads as hierarchy; keep the radius and gap identical across all cells.
  4. Drop content into each cell as Auto Layout stacks so text and media resize cleanly.

Set one cell's fill to your accent and pull its content to white. Limit yourself to a single accent cell per frame so the hierarchy stays legible.

Make cells responsive with variants
  1. Build each cell component with a Size property: Large (2x2), Wide (2x1), Small (1x1).
  2. In a mobile frame, swap the Large hero to Wide or Small and let the wrap grid restack the rest.
  3. Check the visual order top-to-bottom matches the priority you want a reader (and a screen reader) to follow.

Lay out the mobile frame in true stacking order in the layers panel; that order is what a developer will translate into DOM order, which drives reading order.

Accessibility

A bento grid is mostly a visual arrangement, so its accessibility hinges on one thing: keeping the reading and focus order matching the visual priority. The dense-packing tricks that make bento look effortless are exactly what scramble that order if used carelessly.

  1. Keep DOM order equal to visual priority order. Source order is what keyboard and screen-reader users follow, so the hero cell should come first in the markup, not be floated into place.
  2. Do not rely on grid-auto-flow: dense or large grid-row/column reordering to place cells, since that visually moves cells out of source order and can violate a meaningful sequence (WCAG 2.4.3 Focus Order).
  3. Ensure text over image/video cells meets contrast against the busiest part of the media, not just the average; add a scrim.
  4. Every cell-level link/button needs a visible focus indicator on the cell itself.
  5. Do not let a cell's meaning depend on color alone (e.g. the one accent cell); pair it with a label or heading.
Research notes & sources

No dedicated role; a semantic region of grouped content (often headings + list/section landmarks)

  1. How to Use Bento Grids in Web DesignfreeCodeCamp
  2. Bento Grid: CSS recipe, real examples and limitsSuperdesign
  3. Build a bento grid layout with CSS
  4. Bento Grid Layouts 2026StudioMeyer
  5. Bento Grid: Explained with Examples and CodeBanani
  6. Web design trend: bento boxBootcamp (Medium)
  7. Apple iPhone product pageApple
  8. Linear marketing siteLinear
  9. Revolutionizing UI/UX in 2024 with the Bento UI Grid Design TrendStan Vision
  10. grid-auto-flowMDN Web Docs
  11. Understanding Success Criterion 2.4.3: Focus OrderW3C WAI (WCAG 2.1)