Bento Grid

ELI5 — The Vibe Check

A bento grid is a layout inspired by Japanese bento boxes — neatly arranged sections of different sizes that fit together perfectly. In web design, it's a grid where cards have varying sizes (some take up 2 columns, some are tall, some are small squares) creating a visually interesting mosaic. Apple made it trendy in their product pages. Now every landing page has one.

Real Talk

Bento grid is a UI layout pattern featuring a grid of cards or tiles with varying dimensions (spanning multiple rows or columns) that create an asymmetric but visually balanced composition. Popularized by Apple's marketing pages and widely adopted in SaaS landing pages, it's typically implemented with CSS Grid using grid-template-areas or grid-column: span 2 utilities. It combines information hierarchy with visual interest.

Show Me The Code

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.bento-large {
  grid-column: span 2;
  grid-row: span 2;
}

.bento-wide {
  grid-column: span 2;
}

.bento-tall {
  grid-row: span 2;
}

When You'll Hear This

"Use a bento grid for the features section — big hero card, smaller supporting ones." / "Every SaaS landing page in 2025 has a bento grid."