看哪里 看最大的格子放头像和名字，照片作品占一个竖长格，城市、数据、正在听的歌和社交链接各占小格；所有格子间距相同、圆角相同，组成完整的矩形。悬停格子时它会轻微放大；点「正在听」可以播放和暂停
这是什么
Bento 网格把内容放进大小不一的圆角格子，拼成一个整齐的矩形，名字来自日式便当盒的分格。格子越大越重要；每格讲一件事。苹果发布会的功能总结页和许多个人主页让它在 2023 年前后流行
也叫便当格便当盒布局Bento 布局格子布局
关键特征
- 缺了就不像
- 大小不一的格子拼成矩形统一的间距与圆角每格一件事
- 加了更像
- 大格放最重要的信息格内小图标或数据悬停轻微放大
容易混淆
- 网格错峰Grid Stagger
网格错峰是入场动画顺序；Bento 是格子的大小和排布
- 杂志式排版Editorial Layout
杂志式排版靠文字分栏与标题，Bento 靠卡片格子
Bento 网格Bento Grid
大小不一的圆角格子拼成整齐矩形，用格子大小表达主次
你可能会说
- 大小不一的格子拼在一起
- 像苹果发布会那种功能格子
- 个人主页做成一格一格的
适合用在
- 个人主页、链接页（替代一排按钮的 Link in bio）
- 产品功能概览、发布会总结页、年度回顾
- 视频里一屏展示多个卖点的信息图
这样描述给 AI
做一个 Bento 网格风格（Bento Grid）的个人主页：浅灰 #f2f2f4 背景上用 12–16px 统一间距排布大小不一的白色圆角格子（圆角 20–24px），拼成完整的矩形；最大格放头像、姓名和简介，竖长格放作品照片，其他小格分别放所在城市地图、粉丝数据、正在播放的音乐和社交链接；每格只讲一件事，用格子大小表达主次；悬停时格子轻微放大并加柔和阴影