A mosaic of varied-size compartments — a Japanese lunchbox in CSS Grid. Some big, some small, each its own treatment.
A bento grid is a layout (and aesthetic) inspired by a Japanese bento box — a grid of varied-size compartments, each showing a different feature or piece of content. Popularized by Apple's Mac product pages, it's now one of the most popular design trends for SaaS and product landing pages. Think of it as a mosaic of cards, each with its own design, creating a visual collage.
CSS Grid is the technical foundation. Some cards span 2 columns, others are tall and span 2 rows, some are small and square. Cards have different visual treatments: some dark (#111), some light (#F5F5F5), some with gradient backgrounds, some with product screenshots, some with large typography and a stat. The variety in size AND color is what makes it feel premium.
Faster than the build tool you used last year.
Live cursors and CRDT-backed sync.
Drafts and re-writes on demand.
Encrypted by default, every workspace.
Keyboard-first. Mouse optional.
Build a bento grid feature section on a #0A0A0A (near-black) background. Create a responsive CSS Grid with 3 columns and auto rows. Include 6 cards of varying sizes: one large card spanning 2 columns showing a product screenshot, one tall card spanning 2 rows with a bold stat (like '10x faster'), and 4 smaller cards each highlighting one feature. Dark cards use #111111 background, light accent cards use #1A1A2E. Round all cards with 16px border-radius. Add hover scale effect (transform: scale(1.02)).