Bento Grid
便当盒网格
Aliases:便当盒布局便当格网格Bento网格苹果发布会那种格子布局拼块仪表盘不等宽卡片网格Bento Box LayoutBento Grid
What is it
A layout language that packs the interface like a bento box: rounded tiles of varying spans snap to one grid with narrow gutters — big cells carry the hero content, small cells hold stats and garnish. A card-grid upgrade where area itself encodes priority.
Design spec
Typography
System sans with big in-card numerals
Color
Light grey #F5F5F7, white cards, violet #5B5BD6
Border
1px #E5E7EB card borders
Shadow
1px micro shadows for depth
Spacing
16px radius, ~10px grid gaps
Motion
160–200ms ease-out card lift and shadow transition
States
Hover lifts slightly and deepens the shadow; focus shows a visible violet ring; active settles back flat; disabled reduces opacity; error uses a red border
Style in action
See the full page, then try the interactive sceneFull-page preview
A little order.
A better day.
Tasks, notes and plans, together. Make room for what matters in your day.
Get started →
a little further.Keep going →
Interactive scene
Loading demo…
✓ When to use
- Dashboards, profile pages and product overviews with mixed-priority modules
- Feature showcases — one tile, one selling point
- Guiding the eye with area contrast instead of uniform card rows
✕ When not to use
- Unpredictable content lengths that overflow or hollow out tiles
- Narrow screens that collapse to one column and void the bento structure
- Sequential long-form reading where tiling breaks the narrative
Variants
Keynote
发布会式
Apple keynote style — big tiles, big type, product heroes
Dashboard
仪表盘式
Data-first — stat tiles and mini charts packed together
Profile
个人主页式
Personal bento mixing avatar, bio and link tiles
Implementation
display: gridgrid-template-columns: repeat(4, 1fr)grid-auto-rowsgrid-column: span 2border-radius: 16pxgapGrid first, content second: typically 4 columns (2 on mobile) with grid-auto-rows fixing row height; hero cells span 2×2, secondary 2×1 or 1×1; keep gap tight at 8–16px so the box reads as one object; unify radii (14–20px) and padding (16–24px) across cells. One topic per tile — heroes big, stats small. Aim for 5–9 tiles: fewer than 4 loses the collage, more than 10 becomes dashboard noise.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Implement a bento-grid overview section in the current project. Inspect the existing grid, breakpoints and card components first; reuse current spacing and radius variables. Requirements: - One unified grid; tiles composed by span with tight aligned gutters - One topic per tile; hierarchy expressed by area - Uniform radii and padding so the set reads as a single box - Mobile collapses to 2 columns or one column without breaking tiles - Dark mode support - No new dependencies Run existing project checks when done and list the modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsAffectsA visual language built on "less is more": generous whitespace, a restrained monochrome palette and very few type scales let the content speak. All decoration is stripped away; hierarchy is created purely by space, weight and rhythm. Quiet, restrained, content-first.
StylesSimilarA visual language that expresses floating layers as frosted glass: a blurred backdrop (backdrop-filter), a low-opacity fill and a thin white rim of light. Panels literally reveal the vivid background beneath them, so the style is about depth — it only works over rich, colorful content worth revealing.
StylesSimilarAn admin home screen that concentrates key data and entry points into one view, organized as regional grids: header and sidebar handle navigation, while KPI cards, charts and a primary table fill the content area so users grasp system status at a glance and drill down directly. It anchors the information architecture of the product.
PagesUsed withAn atmosphere built from large flowing gradient blooms: teal, violet and blue blurred blobs drift and merge across the background while the foreground stays minimal. Color is the protagonist — soft, cross-hue, aurora-like transitions that give the interface breath and warmth.
StylesSimilar