# Bento 网格（Bento Grid）

镜语 · 版式与界面 / 布局方式

- 别名：便当格、便当盒布局、Bento 布局、格子布局
- 口语：「大小不一的格子拼在一起」「像苹果发布会那种功能格子」「个人主页做成一格一格的」
- 一句话：大小不一的圆角格子拼成整齐矩形，用格子大小表达主次
- 是什么：Bento 网格把内容放进大小不一的圆角格子，拼成一个整齐的矩形，名字来自日式便当盒的分格。格子越大越重要；每格讲一件事。苹果发布会的功能总结页和许多个人主页让它在 2023 年前后流行
- 缺了就不像：大小不一的格子拼成矩形；统一的间距与圆角；每格一件事
- 加了更像：大格放最重要的信息；格内小图标或数据；悬停轻微放大
- 适合用在：个人主页、链接页（替代一排按钮的 Link in bio）；产品功能概览、发布会总结页、年度回顾；视频里一屏展示多个卖点的信息图
- 看哪里：看最大的格子放头像和名字，照片作品占一个竖长格，城市、数据、正在听的歌和社交链接各占小格；所有格子间距相同、圆角相同，组成完整的矩形。悬停格子时它会轻微放大；点「正在听」可以播放和暂停
- 注意：格子太多、大小没有主次时只会显得拥挤，一屏 6–9 格比较好读；手机上需要重新排列成一到两列，而不是等比缩小
- 描述示例：做一个 Bento 网格风格（Bento Grid）的个人主页：浅灰 #f2f2f4 背景上用 12–16px 统一间距排布大小不一的白色圆角格子（圆角 20–24px），拼成完整的矩形；最大格放头像、姓名和简介，竖长格放作品照片，其他小格分别放所在城市地图、粉丝数据、正在播放的音乐和社交链接；每格只讲一件事，用格子大小表达主次；悬停时格子轻微放大并加柔和阴影
- 易混：
  - [网格错峰](https://idea.ameng.dev/terms/staggered-grid.md)：网格错峰是入场动画顺序；Bento 是格子的大小和排布
  - [杂志式排版](https://idea.ameng.dev/terms/editorial-layout.md)：杂志式排版靠文字分栏与标题，Bento 靠卡片格子
- 相关：[极简界面](https://idea.ameng.dev/terms/minimal-ui.md)、[黏土拟态](https://idea.ameng.dev/terms/claymorphism.md)、[框中框](https://idea.ameng.dev/terms/frame-within-frame.md)

## 来源与延伸阅读

- [Laws of UX · Law of Common Region](https://lawsofux.com/law-of-common-region/)
- [NN/g · Cards Component](https://www.nngroup.com/articles/cards-component/)

网页版（含演示）：https://idea.ameng.dev/terms/bento-grid