Building a Mobile-First Bento Grid That Doesn't Fall Apart

Bento layouts look effortless and are deceptively hard to keep tidy across breakpoints. The trick is to design the collapse, not just the desktop composition.

Start from one column

Mobile-first means the base state is a single stacked column. Every tile is full-width, gaps are tight, and reading order matches source order. Only once that reads well do we introduce columns.

Promote to a six-column canvas

On large screens we switch to a six-column grid and let individual tiles span 2, 3, or 4 columns. Because the base is already correct, the desktop layout is purely additive:

.bento { grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .col-4 { grid-column: span 4; }
}

Keep the hierarchy honest

A Bento grid is a hierarchy visualiser. The largest tile should be the most important thing on the page — usually the hero or the featured post. Resist the urge to make everything big.

That’s it. No JavaScript, no layout library — just Grid doing what it does best.