Bento Grids
Bento Grid layout. Ideal for landing pages, saas. AI-ready template.
Use case: Landing pages, SaaS
Historical Context
Apple didn't invent the bento grid. They just made everyone notice it. But the version that ate SaaS whole — the one you see on every startup's feature page now — that came from Linear and Vercel circa 2023. Where Apple's bento was theatrical (big keynote energy, hero moments surrounded by supporting tiles), the Linear interpretation was quieter. Flatter. Cards with generous padding, subtle borders or no borders at all, content that breathed. Vercel's marketing pages took it further: asymmetric columns, mixed aspect ratios, the occasional full-bleed tile breaking the rhythm. By mid-2024, bento was no longer a layout choice — it was the layout. Every SaaS marketing page defaulted to it. The pattern worked because it solved a real problem: how do you present twelve features without a twelve-item bullet list? You give each one a card, vary the sizes to imply hierarchy, and let the grid do the storytelling. The risk now is sameness. When every product page looks like a Linear clone, the grid stops communicating and starts blending. The best implementations in 2025-2026 push back — mixing media types, breaking alignment intentionally, using motion to reintroduce surprise.
When to Use
When you need to present multiple features, capabilities, or product highlights without forcing a linear reading order. Bento grids shine on marketing pages where hierarchy matters but isn't strictly sequential — where a visitor should be able to scan, pick what interests them, and dive in. They work best when you have 4-12 items of varying importance. Fewer than four and you don't need a grid. More than twelve and you need a different information architecture entirely.
Design Principles
- Size encodes importance — larger tiles get seen first, use them for your strongest story
- Consistent internal padding across all cards, even when card dimensions vary wildly
- Flat surfaces with minimal elevation — one shadow level maximum, prefer border or background differentiation
- Asymmetry with intent — break the grid where it serves hierarchy, not for decoration
- Breathing room between tiles matters more than the content inside them — generous gaps prevent visual fatigue
Technical Specs
Colors
Primary
Effects
Hover scale (1.02), soft shadow expansion, smooth layout shifts, content reveal
Light/Dark
✓ Full / ✓ Full
Related
Last synced: 4/1/2026