A bento grid is the asymmetric, card-based layout popularized by Apple's product pages — named after the compartmentalized Japanese lunch box. It's built with CSS Grid, mixing differently-sized cards into one cohesive grid. This generator lets you set the column count, gap, corner radius and an accent glow, then copy the resulting CSS grid layout.
A bento grid is an asymmetric card layout — inspired by compartmentalized Japanese bento boxes — where differently-sized cards sit together in one CSS Grid, popularized by Apple's marketing pages.
Use display: grid with a fixed column count, then size individual cards with grid-column / grid-row spans (e.g. one card spanning 2 columns) to create the asymmetric look.
Most bento layouts use 3–4 columns on desktop, collapsing to 1–2 on mobile — enough columns to let some cards span multiple slots for visual variety.
A soft box-shadow or radial-gradient background with a bright accent color, kept subtle, creates the glow look popular in modern bento/SaaS UI — this generator's glow slider controls its intensity.
Yes — completely free with no sign-up, and it runs entirely in your browser.
Yes, toggle the light/dark preview — bento grids are especially common in dark-themed product pages.