What is Bento grid?

A bento grid takes its name from the Japanese lunch box divided into compartments of different sizes. On the web it means a set of cards placed on a single CSS grid, where some tiles span two columns or two rows and others take a single cell. The varied sizes create a visual hierarchy without extra decoration: the largest tile reads first, the small ones read as supporting points. Product pages and keynote slides made the style common, and it now appears on most SaaS landing pages as a feature overview.

When to use it

• Four to eight parallel features that each need a short line and a small visual. Fewer than four looks sparse; more than eight turns into a wall.
• A dashboard overview where one metric deserves more room than the rest.
• One clear lead tile. If every feature is equally important, a plain feature grid is easier to scan.

How to build one with CSS grid

Tailwind CSS v4 has everything needed. Define the columns, fix a row height with auto-rows, and let individual tiles span:

<section className="grid grid-cols-1 gap-4 md:grid-cols-3 md:auto-rows-[220px]">
  <article className="rounded-xl border border-border bg-surface p-6 md:col-span-2 md:row-span-2">
    <h3 className="text-lg font-medium">Live dashboards</h3>
  </article>
  <article className="rounded-xl border border-border bg-surface p-6">
    <h3 className="font-medium">Alerts</h3>
  </article>
  <article className="rounded-xl border border-border bg-surface p-6">
    <h3 className="font-medium">Exports</h3>
  </article>
  <article className="rounded-xl border border-border bg-surface p-6 md:col-span-3">
    <h3 className="font-medium">API access</h3>
  </article>
</section>

On small screens every tile collapses to one column, so write the source order in the order people should read it. The spans are layout only. Keep one gap value across the grid and the same corner radius on every tile; elements nested inside a tile use the outer radius minus the tile's padding.

Give each tile a heading so screen reader users can jump between features. If a whole tile should be clickable, put the link on the heading and stretch its hit area over the tile with a pseudo-element. Wrapping the entire tile in an anchor makes screen readers read all of its content as one long link name.

Common mistakes

• Using `grid-auto-flow: dense` to fill gaps. It moves tiles visually but not in the DOM, so keyboard and screen reader order no longer match what people see.
• Too much text in small tiles. A bento tile holds a heading, one sentence and a visual. Longer copy belongs in a section below.
• Fixed row heights with fluid text. If a tile's content can grow, use min-h or auto-rows-min so text never overflows at large font sizes.
• Motion on every tile. A single looping visual in the lead tile is enough. Honor prefers-reduced-motion for the rest.

The premium HeroBento and FeatureBentoMotion components ship tuned spans, responsive fallbacks and reduced-motion handling. See the marketing category and the Next.js landing page guide for how a bento section fits with the hero section above it.