Bento grid web design: uneven tiles that tell a story
A bento grid packs tiles of different sizes into one tidy rectangle, like the compartments of a bento box. It works when the sizes mean something: the most important thing gets the biggest tile. When every tile holds an icon and a slogan, it's the old three feature cards with extra steps.
What a bento grid is
The name comes from the Japanese lunch box divided into compartments of different sizes. In interface design it describes a grid where tiles span different numbers of rows and columns but fit together into a clean overall shape with even gaps. It became a familiar pattern on product launch pages, where one large tile shows the headline feature and smaller tiles around it show supporting details, and on personal pages that collect links, photos and stats in one view.
Compared with an ordinary card grid, the key difference in bento grid web design is that size carries meaning. A bento grid layout is a hierarchy drawn as a floor plan.
When it tells a story, and when it doesn't
| Working | Decorating |
|---|---|
| Tile sizes follow importance | Tile sizes are chosen to fill gaps |
| Each tile holds something different: a photo, a number, a quote, a short demo | Every tile has an icon, a two-word title and one line |
| Large tiles carry real content, such as a product photo or a key figure | Large tiles are mostly empty space with a gradient |
| You could describe the grid in one sentence of priority | The order would make no difference if shuffled |
| It holds six to ten tiles | It holds three, padded out, or twenty, crammed |
Good fits: a product page showing one main feature and several supporting ones, a portfolio summary with one featured project, a café page mixing a photo, opening hours, a map link and the week's special. Poor fits: anything with a reading order that matters, such as steps, and any page where the content is really a list.
Bento grid CSS, with template areas
CSS grid makes this straightforward. Define the columns and rows, then name the areas with grid-template-areas so the layout is readable in the stylesheet:
- The container:
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(160px, auto); gap: 16px; - The map:
grid-template-areas: "main main side1 side2" "main main wide wide" "stat quote wide wide";gives one large tile, two small ones, a wide one and two at the bottom. - Each tile:
grid-area: main;and so on. The HTML order stays logical while the areas place tiles visually. - Spans instead of names: for grids that change often,
grid-column: span 2; grid-row: span 2;on the big tile is simpler, withgrid-auto-flow: denseto fill gaps. - Consistent gaps and radius: one gap value and one tile radius. The precision of the gaps is most of what makes a bento grid look designed.
Making it work on phones
A four-column bento has nowhere to go on a 375px screen. Redefine the template areas in a media query: two columns on tablets, with the main tile spanning both, and a single column on phones. In a single column the bento becomes a list, so the HTML order is what the visitor reads. Put the main tile first in the markup, then the rest in order of importance, not in the order they happened to sit in the desktop layout.
Accessibility points
- Reading order. Screen readers and keyboard focus follow the HTML.
grid-auto-flow: denseand named areas can move tiles far from their source position, so check that tabbing through the grid doesn't jump around. - Headings inside tiles. Give tiles that start a topic a real heading, so the grid can be navigated by headings.
- Text on image tiles. Large photo tiles with overlaid text need a scrim or a plain area for the words to keep contrast at 4.5:1.
- Whole-tile links. If a tile is clickable, use one link and stretch it, rather than wrapping a tile full of content in an anchor.
Bento layouts and Anticode
No Anticode design system presets a bento grid; the design engine chooses grids, lists and splits for each section from its content. You can get close by hand with the layout editor: select a tile, drag its edge to make it wider, and the size snaps to columns, so a featured item can span two of them while the rest stay single. Drops become an order, so you can move the main item first.
What the layout editor doesn't do is span rows or name grid areas, so a true bento with tiles of different heights needs a hand edit in an exported copy. For the simpler cousin, see card layout design; for column systems, the 12-column grid.
Questions people ask
What is a bento grid in web design?
A layout of tiles in different sizes that fit together into one rectangle with even gaps, where tile size reflects importance. It's named after the compartmented Japanese lunch box.
How do I make a bento grid responsive?
Redefine the grid's columns and template areas at each breakpoint: four columns on desktop, two on tablets, one on phones. Order the HTML by importance so the single-column version reads well.
Is a bento grid better than a card grid?
Only when items differ in importance or kind. For many items of the same type, such as products, a regular card grid is easier to scan.
Sources
- MDN: grid-template-areas, checked