Bento GridBento 网格
Different-sized cards, tiled like a lunchbox — one idea per cell.大小不一的卡片,像便当盒一样拼起来——每格一个意思。
Where it is in its life它走到哪一步了
Still climbing, not yet default. The Are.na reference board is active (30 blocks). A real window before it’s everywhere.还在上升,尚未成为默认。Are.na 参考板活跃(30 块)。真正铺开之前还有一个窗口。
Weekly watchlist每周看板live实时
Ship it, don’t just see it不止看见,直接拿走
Copy the working snippet, or grab the palette and type as tokens for your project — CSS variables, Tailwind, or W3C design tokens. All free.复制能跑的代码片段,或把配色和字体作为 tokens 拿进项目——CSS 变量、Tailwind、W3C design tokens。全部免费。
What it is, and why now是什么,为什么现在
The bento grid arranges content into neatly-packed cards of varying sizes, each holding a single point. It’s how Apple and half of modern SaaS present features now.便当网格把内容摆进大小不等、拼得紧凑的卡片里,每格装一个点。现在苹果和半数现代 SaaS 都这么展示功能。
When to reach for it什么时候用它
Use for用在
- Product feature showcases
- Marketing pages
- Portfolio hero grids
- 产品功能展示
- 营销落地页
- 作品集首屏
Avoid for别用
- Long forms / dense data
- Strongly linear flows
- 长表单/密集数据
- 强线性流程
Colour, with roles配色 · 带角色
Type pairing字体搭配
Body — Inter.正文 — Inter。 Keeps captions and UI legible underneath it.让下面的说明和 UI 保持清晰可读。
Both open-source (Google Fonts), free for commercial use. Pairing + embed code in the Pro assets.均为开源(Google Fonts)、可商用。搭配与嵌入代码在 Pro 素材里。
It’s a material, not a filter是材质,不是滤镜
Consistent rounded corners and even gaps are non-negotiable. Give each cell one job — a number, an icon, a small image — and vary sizes to build rhythm, not just to fill space.一致的圆角和均匀的间距不可妥协。每格只给一件事——一个数字、一个图标、一张小图——用大小变化做节奏,而不是填空。
Sources, not screenshots是来源,不是截图
Curated links to where this actually lives and gets documented — live boards for reference, editorial for pitch language, galleries to gauge saturation. We link out and credit rather than re-host anyone’s work.精选链接,指向这个方向真正活着、被记录的地方——实时参考板、给提案话术的编辑内容、判断饱和度的画廊。我们只链接并署名,不搬运任何人的作品。
A recipe配方
- Cards of different sizes tiled like a bento box
- rounded corners + even gaps
- one point of info per cell
- mix icons, small images and numbers.
- 不同大小卡片拼成便当盒
- 圆角+适度间距
- 每格一个信息点
- 图标/小图/数字混排。
It’s all free全部免费
Every guide, the live timing, palettes and example images — all free. Get the weekly “what’s rising” email so you never miss a move.每份指南、实时时机、配色和范例图——全都免费。订阅每周“什么在涨”邮件,不错过任何动向。