Bento Grid
You might say
Use one of those trendy feature sections made of differently sized tiles.
Arrange different kinds of content in a clear modular gridA bento grid places feature cards of different sizes into one structured composition. Larger cells signal priority while smaller cells add supporting facts, media, or actions. The grid needs a reading order and responsive plan; varied card sizes alone do not create useful hierarchy.
Scroll sideways to explore the full example
COACHTake a short walk
before your next call.
before your next call.
Record Example
Design Principles
- Assign card size from content priority
- Keep a clear reading path across the grid
- Give each cell one focused job
- Use shared spacing, corners, and surfaces to hold the set together
- Recompose the grid deliberately for narrow screens
When to use it
- Product feature overview
- Portfolio or case-study indexM4 chip10-core CPU · 18h battery life · 38 teraflops
- Dashboard with several content typesFeature page
- Homepage section with visual variety
When NOT to use it
- Give every card equal emphasis inside a supposedly varied grid
- Place unrelated fragments together only to fill gaps
- Force the desktop mosaic into one cramped mobile row
- Use decorative cards that repeat the same messageFirst step → Second step → Third step
Anatomy
Uneven grid
Rounded corners 16-24px
Uniform spacing
Content Priority
White grid on gray background
Use different spans to express priorities; the reading order must still be maintained after rearrangement for small screens
Card rounded corners come from project scale and are coordinated with card size and brand ethos
Consistent spacing helps groups be identified; larger group spacing can be used when grouping is required
Title, description, data and actions are organized by priority, the number of elements is determined by the content
The example uses a light gray background with a white card; other themes are also acceptable as long as the borders and contrast are clear
AI Prompt
Bento grid layout with varied card sizes, one feature per cell, 20px rounded corners, light gray canvas, white cards, icons with large type and one concise line of supporting copy
Typical use cases
Feature overview
Scroll sideways to explore the full example
M4 chip, ridiculously fast.
Each item is stronger than another.
CPU10-core CPU
1.6x performance improvement
1.6x performance improvement
18h
Battery life
Example indicators
Explanation of calculation method and time range
Hardware light tracing
The game screen is close to the console
Portfolio
Scroll sideways to explore the full example
What can Paws doCat Life, an App All inclusive
Feeding reminder
Vaccine Record
4.2kgThis month’s weight curve ↗ Health
App Store Download →
Product dashboard
Scroll sideways to explore the full example
FEATURES
Four things for team speed
⌘K Command Panel
Without touching the mouse, you can directly access any page or operation in one sentence.
Response example
The actual response indicators need to indicate the test conditions and calculation method
Real-time collaboration
Multiple cursors are visible on the same screen
AI automatic sorting
Scattered tasks are automatically classified into iterations, and a draft of the weekly report is automatically written.
Company homepage
Scroll sideways to explore the full example
Xiaoli
Independent developer · Shenzhen
Now playingNight Star
Blog
GitHub
Weekly Newsletter1,204 subscribers
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading