Bento grid design: how to build hierarchy without losing the reader

A bento grid is a layout of rectangular tiles in different sizes, placed on one shared grid, with one idea in each tile. The size of a tile tells the reader how much that idea matters. The name comes from the Japanese bento box, a lunch box split into compartments of different sizes, one dish to each.

The pattern looks simple, which is why it's easy to get wrong. A grid of equal boxes reads as a list. A grid where every box is big and colorful reads as noise. Most of the work is deciding what deserves the big tile, and then keeping that decision intact on small screens and for people who use a keyboard or a screen reader.

Bento layouts and interface animation were the subject of my master's thesis in interactive media design. This guide stays with rules you can check against your own layout, and the examples are live: switch between the modes and watch the hierarchy change. When you want to try a layout of your own, the bento grid generator builds one and checks its reading order for you.

What makes a layout a bento grid

A few rules separate a bento grid from any other card layout:

• Every tile sits on the same column grid and spans whole cells, so edges line up across the section.
• The gaps between tiles are the same everywhere.
• Tiles differ in size on purpose. A tile is big because its content is more important or needs more room, never to fill a hole.
• Each tile carries one message: a claim, a number, a picture, a control. If a tile needs two headings, it is two tiles.

Nielsen Norman Group's article on the principle of common region describes how elements inside a shared boundary are seen as belonging together, and how a clear boundary can outweigh proximity and similarity as a grouping cue. In a bento grid, each tile's border or background is that boundary, which is why a metric, a screenshot and a sentence can sit side by side without blending into one block.

The same research group's definition of cards explains where this works best. Cards suit collections of heterogeneous items that people browse, such as dashboards and overview pages. A bento section on a landing page fits that description: a handful of unlike things that a visitor scans to get the gist.

Size is the hierarchy

In a bento grid, the eye usually goes to the largest, highest-contrast tile first. That makes tile size the main tool for hierarchy, and it only works if one tile clearly wins.

The uniform grid and the loud one fail for the same reason: neither gives the eye a place to start. The lead-tile version does, and its five smaller tiles stay easy to compare because they share a size.

A few rules follow from this:

1. Pick one lead tile per section. Give it the largest span and the only strong fill color.
2. Use at most two other sizes, for example 2×1 and 1×1. More variety than that stops reading as hierarchy and starts reading as randomness.
3. Put the lead tile where reading starts: top left in a left-to-right language, or top center in a symmetrical layout.
4. Keep accent color for one or two tiles. If every tile has a different background, color stops meaning anything.

Choosing what goes in each tile

Write the content before you draw the grid. Tile sizes should come from how much each idea needs to say, and you only know that once the copy exists.

As a rough guide, a 1×1 tile holds a short title and one line, or a single number with its label. A 2×1 tile holds a sentence or a small chart. A 2×2 tile can carry a short paragraph, a product screenshot or an interactive element. If the text for a 1×1 tile wraps to five lines at your narrowest tile width, the tile is too small or the copy is too long.

Mixing types is fine and usually helps. A metric next to a screenshot next to a one-line claim gives the eye three different things to land on. What doesn't work is a tile that tries to be a metric, a screenshot and a call to action at the same time.

Gaps, padding and corner radius

Three spacing values decide whether a bento grid feels like one designed object or a pile of boxes:

• The gap between tiles. Keep it smaller than the padding inside a tile, so the tiles still read as one set.
• The padding inside each tile. Use the same value for every tile, including the large ones. A big tile gets more room for content; its padding stays the same.
• The corner radius. One value for all tiles. If tiles contain inset elements such as an image with its own rounded corners, the inner radius should equal the outer radius minus the padding, or the curves won't run parallel.

.tile {
  --radius: 20px;
  --pad: 16px;
  border-radius: var(--radius);
  padding: var(--pad);
}

/* Inner corners follow the outer curve. */
.tile img {
  border-radius: calc(var(--radius) - var(--pad));
}

These three values are good candidates for design tokens, so every bento section on a site shares them. The guide on design tokens in Tailwind CSS v4 shows one way to set that up.

When a bento grid is the wrong choice

The NN/g card research also lists where cards perform worse than plain lists, and the same limits apply to bento grids. Card layouts are less scannable than lists, they are a poor fit when people need to compare options, they take more space, and they tend to play down ranking.

That rules out a few common uses:

• Pricing and feature comparisons. People compare row by row, which a table does far better.
• Search results and anything ranked. Position in a bento grid doesn't read as rank, so the order you worked out gets lost.
• Step-by-step flows. A sequence needs a direction, and a bento grid has none.
• Long text. If a tile needs scrolling or more than a short paragraph, the content belongs on a page of its own.

A bento section works best as a summary that people browse, such as what a product does or what changed in a release.

Collapsing a bento grid on phones

On a narrow screen a four-column grid has to become one or two columns, and that is where many bento designs lose their structure. There are three common approaches.

Stacking everything in one column is the safe default: nothing is hidden, and the order on screen is the order in the HTML. Pairs keep more of the grid's character, as long as every small tile still works at roughly half the screen width. A sideways-scrolling rail keeps the page short but hides most tiles until someone swipes, so it needs a visible cue (a partly cut-off tile works well) and the row must be reachable and scrollable with the keyboard.

Whichever you pick, the content has to fit a 320 CSS pixel viewport without scrolling in two directions. That is the WCAG 2.2 Reflow criterion (1.4.10, level AA), and fixed-width tiles that make the whole page scroll sideways fail it.

Motion: what to animate and what to leave still

Bento grids attract animation, from tiles that rise in on scroll to small looping illustrations inside them. A little motion helps people see the structure; a lot of it competes with the hierarchy the tile sizes set up.

Some practical limits:

• If tiles animate in, stagger them in reading order, the same order a screen reader will use. Tiles appearing in a scattered order undo the work of the lead tile.
• Keep entrance animations short (around half a second per tile) and play them once.
• Avoid several looping animations at once. Any content that moves on its own for more than five seconds, alongside other content, needs a way to pause, stop or hide it under WCAG 2.2 success criterion 2.2.2 (level A).
• Wrap all of it in a prefers-reduced-motion: no-preference media query, so people who have asked their system for less motion get a still layout.

An accessibility checklist for bento layouts

Most accessibility problems in bento grids come from the gap between how the grid looks and how it is built. Go through these before you ship:

1. The HTML order matches the visual order at every breakpoint. CSS Grid can place tiles anywhere, but screen readers and the Tab key follow the source. The CSS Grid specification says placement must be used only for visual, not logical, reordering, and WCAG 2.2 treats a broken reading sequence as a failure of 1.3.2. The CSS and Tailwind guide shows where this goes wrong and how to fix it.
2. Each tile has a real heading, so screen reader users can jump between tiles the way sighted users scan them.
3. A clickable tile has one link. Make the heading the link and stretch its hit area over the tile, rather than wrapping the whole tile in a link that contains other links or buttons.
4. Focus is visible on every interactive tile, and the focus ring isn't clipped by overflow: hidden.
5. Text on image or gradient tiles keeps a contrast of at least 4.5:1, measured against both the lightest and the darkest part of the area behind it.
6. Images that carry meaning have alternative text. Decorative illustrations have empty alt text.
7. Animations respect reduced motion, and anything that loops can be paused.
8. The layout reflows to one column at 320 CSS pixels with no sideways scrolling of the page.

Build one and check its reading order

The bento grid generator puts these rules into a tool. Lay out tiles for phone, tablet and desktop, see the order a keyboard user would follow drawn over the grid, and copy the result as CSS Grid, Tailwind CSS v4 classes or a React component. Every layout lives in the page address, so a link is all you need to share one.