Bento Grid CSS: Complete Tutorial + Free Examples (2026)

#css #webdev #design #tutorial

The bento grid is one of the most visually striking UI trends of 2026. Named after the Japanese bento box, bento grid layouts arrange content into asymmetric, magazine-style blocks of varying sizes on a shared grid.

What Is a Bento Grid Layout?

Unlike traditional CSS grids where every cell is the same size, a bento grid is intentionally asymmetric. Some cells span two columns. Others span three rows. The variety creates a dynamic, editorial feel that immediately communicates visual sophistication.

Apple popularized this layout at WWDC 2023 and it has spread across the entire web design industry. In 2026, bento grids are used for product feature showcases, portfolio layouts, pricing pages, and dashboard UIs.

The CSS Foundation

Every bento grid starts with a CSS Grid container:

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

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

.bento-cell {
  background: #0d0d0d;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 24px;
}

Dark Mode Bento Grid

For dark mode bento grids — the most popular variation — use slightly different shades for each cell:

Base background: #050505
Standard cells: #0d0d0d
Elevated cells: #141414
Accent cells: brand color

Glassmorphism Bento Grid

Apply frosted glass styling to each cell:

.bento-glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
}

Responsive Bento Grid

At mobile, reset all spans and use auto-flow:

@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-hero,
  .bento-wide {
    grid-column: span 1;
    grid-row: span 1;
  }
}

Key Design Principles

Consistent base unit — all cell sizes should be multiples of the same unit
Content justifies size — bigger cells earn their size with richer content
Consistent border-radius — use the same value across all cells (16-24px)
70/20/10 color rule — 70% standard bg, 20% elevated, 10% accent
Hover micro-animations — transform: scale(1.02) on hover

For free copy-paste bento grid CSS templates, visit ProofMatcher — we have dark mode, glassmorphism, and animated variants ready to download.

Originally published at ProofMatcher Blog

DEV Community