Bento 便当格
Bento Grid
初级通用Bento 便当格（Bento Grid）是一种把大小不同的内容块排进规整网格的设计风格，像便当盒分格一样组织页面。它让你在展示多项功能或信息时，能用格子的大小突出重点，又让整体保持有序。
你可能会说：「我想把产品功能排成大小不同的方块，重点功能占大格，其他功能放小格，但整体看起来整齐。」
动手看看产品首页的功能便当格
智能工作台
数据概览
团队日程
快捷审批
帮助中心
主卡横跨 grid-column
主卡纵跨 grid-row
这是一个三列的产品功能区。主卡跨几列、几行，就占据多少个网格单元；其他卡片会按 CSS Grid 的自动放置规则依次找空位。
主卡横跨两列，再跨两行，重点功能一下就显眼了；周围的小卡仍沿着同一套网格排，看起来不会乱。
要点便当格怎样把重点排出来？
- 1
先按内容重要性分配格子
你可以让核心功能占两列或更高的格子，次要功能各占一格。因为面积会影响用户先看哪里，所以格子大小最好跟信息优先级有关，而不是为了填满空位随意拼。
- 2
用统一规则约束不同尺寸
格子可以有大有小，但我们通常会让它们遵循同一套列宽、间距和对齐线。这样做的好处是，页面既有变化，也不会像几张尺寸不同的宣传图临时摆在一起。
- 3
让每个格子承载完整信息
做 AI 工具的功能介绍时，一个格子可以放功能名称、简短说明和界面截图。用户看完这一格就能理解它在讲什么；如果内容必须按顺序读完几格才明白，分格反而会打断理解。
容易混淆的地方
便当格和普通卡片网格都用块状区域，但普通卡片网格常让每张卡片尺寸相近，方便平等浏览；便当格会用不同跨度突出少数重点。它也不是瀑布流：瀑布流通常按内容高度向下排列，适合连续浏览大量内容；便当格更在意整体编排和视觉层级。
什么时候用
适合用
- 做 SaaS 官网的功能介绍：用大格展示核心工作流，小格介绍集成、权限和报表。
- 做 App 首页概览：把用户最关心的进度放大，其余状态各占一个小格。
- 做 AI 工具的发布页：让主能力的操作示意图占大格，旁边分格说明辅助能力。
不适合用
- 后台需要让用户逐行比较几十条记录时，用表格更合适，便当格会让字段难以对齐。
- 用户要按时间连续阅读更新记录时，用时间轴或列表更合适，不必把每条记录拼成不同尺寸。
- 填写资料或完成连续步骤时，用表单和步骤条更清楚，大小不一的格子帮不上操作顺序。
练一练选一个答案，看看解释
你在做一款 AI 写作工具的官网，要介绍六项功能，其中「从资料生成初稿」是主打能力。哪种安排更接近便当格？
让 AI 帮你做复制给 AI Agent 直接用
请把这页 AI 写作工具的功能介绍做成 Bento 便当格。主打的「从资料生成初稿」占较大格子，其余功能用小格展示；保持统一间距和对齐，每格包含标题、简短说明及合适的示意内容，并说明窄屏下如何重排。