Bento Grid

A bento grid is a layout pattern where a section is divided into unequal rectangular cells, each holding a distinct piece of content, arranged so the whole grid reads as a single composition. The name comes from the Japanese bento box: compartments of different sizes, each holding something different, visually balanced as a whole.

Bento grids have three essential characteristics. First, unequal cells, usually built on a 3-column or 4-column grid with some cells spanning multiple columns or rows. Second, varied content per cell, with one cell holding a chart, another an illustration, another a metric, another a testimonial. Third, visual coherence across the whole, usually through shared background treatment, consistent border radii, and restrained color use.

What a bento grid is not: a CSS Grid demo, a masonry layout, a Pinterest feed, or a random arrangement of cards. Bento is compositional, not algorithmic. The designer decides what goes in the hero cell, what supports, and what closes the grid. A masonry layout would place content by height. A bento grid places content by importance.

Bento replaced the three-column feature row on modern product pages because the feature row tells a story that is rarely true anymore. Few modern SaaS products have three features of equal weight. Most have a platform with one hero capability, three to five supporting capabilities, one integration story, and one proof point. That shape does not fit a three-column row. It fits a bento. The layout moved to meet the content.

Real examples that define the pattern in 2026: Apple's Mac product pages (the benchmark, since late 2022), Linear's features page (bento for developer tooling with monospace labels and pure product screenshots), and Vercel's homepage (mixed-media bento with illustrations, screenshots, and text cells unified by shared visual language). Each of these applies the same underlying structure to a completely different tone.

When bento works: platforms, suites, dashboards, proof pages, capability overviews. When it fails: sequential content (tutorials, step-by-step flows, narrative case studies), content where every piece is genuinely equal weight, pieces that need real depth (200+ words per feature), and layouts where nobody has good visual assets per cell.

CSS Grid makes bento easy to implement. Twenty lines of CSS, a 3 or 4 column grid, and span rules on each cell. The math is simple. What makes bento hard is the editorial decision about which cells deserve weight. That is where taste shows up, and taste is the part designers still own.

Mobile is where most bento implementations fail. The mistake is keeping the desktop grid and scaling down. The correct pattern is re-flow: at mobile breakpoints the grid collapses to a single column, but cell order changes to put highest-importance content on top. Hero cell first, then the strongest supporting cells, with lower-priority cells underneath.

Bento is not a trend. Trends last one or two years. Bento grids have held as the dominant layout pattern on major product pages since 2022 and continue to spread into dashboards, email templates, and proof-of-concept surfaces. The pattern stuck because it matches the shape of real products, not because it looked novel in a Dribbble shot.

A bento grid is compression. A feature row is narration. Most products need compression.