Bento Grid
便当盒网格
Asymmetric modular grid inspired by bento lunchboxes, arranging varied feature tiles cleanly.
Live Demo
Actually clickableIntelligent Pattern Synthesis
Decomposes UI into 3-tier actionable prompts.
Pure SSG static.
High contrast.
What you just saw:Apple product pages or tech keynotes: a large dark tile showing chip performance on the top left, two small clean tiles for battery and ports on the right, and a wide panoramic card spanning the bottom.
What it actually is
Bento Grid breaks free from repetitive uniform cards. Borrowing from traditional bento boxes that parcel main dishes, sides, and rice into proportional compartments, this layout assigns large 2x2 or 2x1 tiles to flagship capabilities while tucking secondary perks into compact modules. The result is visual dynamism anchored by crisp external geometry.
Anatomy · What it's made of
Hero Tile主角大卡片
Dominant 2x2 or 2x1 tile spotlighting flagship feature
Supporting Tiles辅助小卡片
Standard 1x1 modules detailing complementary perks
Wide Tile横向通栏卡片
Full-row span highlighting panoramic metrics or workflows
Uniform Radius & Gap统一圆角与间距
Consistent rounded corners and gutters anchoring the grid
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Product feature matrices requiring clear hierarchy and visual rhythm | Yes |
| Feature suites where benefits vary substantially in importance and media type | Yes |
| Modern tech hardware, software ecosystems, and creative agency highlights | Yes |
| Homogeneous tabular datasets with identical data fields | No |
| Unbounded, user-generated feeds with arbitrary aspect ratios | No |
Forcing 10 equal-weight form inputs into asymmetric boxes, creating cognitive chaos.
Failing to provide a single-column fallback on mobile, causing severe layout crushing.
Similar Patterns
Don't mix these upBento GridCurrent
便当盒网格
Asymmetric modular grid inspired by bento lunchboxes, arranging varied feature tiles cleanly.
Masonry Grid
瀑布流
Dynamic multi-column layout where variable-height items stack tightly without vertical gaps.
In one line:Asymmetric modular grid inspired by bento lunchboxes, arranging varied feature tiles cleanly.
Masonry Grid
瀑布流
Dynamic multi-column layout where variable-height items stack tightly without vertical gaps.
Hero Section
首屏焦点区
The primary above-the-fold spotlight communicating headline value and primary calls to action.
Container
版心
Constrains page width and centers content to prevent overly long lines on wide displays.
Full-Bleed Section
全宽通栏带
Breaks container constraints to stretch edge-to-edge, injecting contrast and spatial pacing.
How to tell AI
Three levels of promptAdd the component name and specifics
Create a Bento Grid with 4 tiles: tile 1 spans 2 columns featuring an interactive preview, tiles 2 and 3 are standard 1-column cards, tile 4 spans full bottom width. Uniform 16px rounded corners and subtle borders.
Don't just say this to AI
Bad → BetterDon't say this to AI
Arrange some different sized cards.
Say this instead
Design a Bento Grid feature section: grid-cols-1 md:grid-cols-3 gap-4, key feature tile md:col-span-2 md:row-span-2 with rich visuals, surrounding cards for secondary stats, collapsing gracefully on mobile.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.