Bento Grid — Free HTML CSS Dark Layout Snippet

The bento grid is a modern layout pattern borrowed from Japanese bento boxes — a collection of different-sized cells arranged in a grid, each containing distinct content. Made popular by Apple and Linear, it is used on feature pages — alongside feature cards and a metric card grid — to showcase product capabilities where each feature gets a proportional amount of visual space based on its importance.

The grid structure

.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px } creates a three-equal-column grid. Cells span different numbers of columns using grid-column: span N: .a { grid-column: span 2 } makes the first cell take two columns and the next cell one, creating a 2+1 row. .d { grid-column: span 2 } in the second row creates a mirrored 1+2 layout. This combination produces the visually varied bento pattern.

Named cell classes

The cells use single-letter class names (.a, .b, .c, .d, .e) as span modifiers. Most cells use the default .cell background (#1e293b). Cells .a and .e use their own gradient backgrounds to create accent points of visual interest.

The hover interaction

.cell:hover { transform: translateY(-2px); border-color: rgba(99,102,241,0.3); } lifts each cell and tints its border with the accent colour on hover. The transition: transform 0.2s, border-color 0.2s makes both smooth. The default border is rgba(255,255,255,0.06) — nearly invisible on dark background.

Content patterns

The snippet demonstrates four content patterns: emoji icon + heading + description (standard feature cell), large stat number + label (metric cell), and pure gradient accent cells. These four patterns cover most feature grid use cases.

Making it responsive

For mobile, override the grid to a single column: @media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .a, .d { grid-column: span 1; } }. All cells stack vertically on narrow screens.

The grid-column: span pattern

Bento grid items use grid-column: span 2 to occupy two columns of width while using the standard row height. Some items use grid-row: span 2 for double-height cells. The container uses display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px. The browser automatically positions items in the available cells following the normal document flow, wrapping to new rows as needed — for a uniform-cell variant, use the responsive card grid. No manual row/column placement is required — the span values create the varied layout automatically.

Responsive adaptation

On narrow screens, reduce the grid columns: @media (max-width: 768px) { .bento { grid-template-columns: repeat(2, 1fr); } }. Items with span 2 that were wide on desktop now span both narrow columns, becoming full-width. For mobile, single column with no spans works best. Each breakpoint may need custom span overrides for specific items.

The hover accent border

Each bento card uses border: 1px solid transparent initially. On :hover, border-color transitions to the accent colour. Combined with border-radius and the card background, this creates a lit border effect that highlights the card being hovered without moving it. Add box-shadow: 0 8px 32px rgba(accent, 0.1) on hover for additional lift.