便当格Bento Grid

核心特征

• 页面被分成大小不一的格子，彼此对齐成矩形
• 格子圆角很大，常见 24px，内边距充足
• 浅灰底配白色格子，个别格子用深色或强调色
• 每个格子只讲一件事，数字与关键词放大加粗
• 格子间距统一，通常为 12–16px

色板与字体

英文

Inter（自托管）

中文

系统黑体：苹方 / 微软雅黑

说明

真实项目常用 SF Pro、Inter 或 Geist，大号数字用较粗字重并开启 tabular-nums 保证对齐。

起源与代表作

年代：2023 年前后流行（苹果发布会的功能总结页带火）

便当格的名字来自日本的便当盒：一个盒子被隔成大小不同的格子，各自盛放不同的食物。2023 年前后，苹果在发布会与产品页中频繁用这种大小不一的圆角格子总结功能亮点，随后 Linear、Vercel 等产品官网和大量作品集页面纷纷跟进。它适合在一屏内展示多种互不相关的信息，现代 CSS Grid 让这种布局的实现成本很低。

AI 设计提示词 · Prompt

便当格（Bento Grid）风格界面：页面背景浅灰 #F5F5F7，内容全部装进圆角 24px 的格子里，格子间距 14px，内边距 22px。使用 CSS Grid，格子大小不一：首格横跨整行，其余格子并排；格子底色以白色 #FFFFFF 为主，再安排一格深色 #1D1D1F 白字、一格强调色苹果蓝 #0071E3 白字。每个格子只讲一件事：一个小标题加一句说明，数字用 34px、字重 800。文字墨黑 #1D1D1F，次要文字 #5E5E63。无描边，无阴影或只用极轻的投影，层次靠格子色块区分。标题使用 Inter 800。保证每个格子在手机上能重排为单列。所有文字对比度不低于 4.5:1，深色格子里的次要文字也要达标。

A Bento Grid interface: light gray page background #F5F5F7, with all content placed in cells with a 24px corner radius, a 14px gap and 22px padding. Use CSS Grid with cells of different sizes: the first cell spans the full row and the others sit side by side. Cells are mostly white #FFFFFF, with one dark cell #1D1D1F with white text and one accent cell in blue #0071E3 with white text. Each cell tells one thing: a small heading and a one-line description, with numbers at 34px and weight 800. Text is ink black #1D1D1F and secondary text is #5E5E63. No borders and no shadows, or only a very light one; hierarchy comes from the color of the cells. Headings use Inter 800. Make sure every cell reflows to a single column on mobile. Keep text contrast at least 4.5:1, including secondary text inside dark cells.

CSS 设计变量

这套风格的设计令牌，可直接粘贴进项目的全局样式。

:root {
  --ds-bg: #f5f5f7;
  --ds-cell: #ffffff;
  --ds-cell-dark: #1d1d1f;
  --ds-text: #1d1d1f;
  --ds-accent: #0071e3;
  --ds-radius: 24px;
  --ds-gap: 14px;
  --ds-pad: 22px;
}

适合与不适合

和相近风格的区别

• 扁平化：便当格是一种布局方式，把内容装进大小不一的圆角格子里；扁平化是一种视觉处理，强调纯色与无阴影。两者常常结合使用。
• 瑞士国际主义：便当格由大圆角格子拼成，格子本身是带底色的容器；瑞士风格靠网格与细线分隔，零圆角、无底色，信息以文字排版为主。

常见踩坑

• 格子大小不一时，内容的阅读顺序容易混乱，DOM 顺序要符合逻辑，不要只靠 grid-area 打乱视觉顺序，否则读屏顺序会错位
• 每个格子都放大号标题与数字，会让页面失去主次，应选一两个主格放大，其余保持克制
• 固定行高的格子在手机上会溢出，窄屏要退回单列，并让格子高度由内容撑开
• 深色或强调色格子里的次要文字常常对比度不足，请按 4.5:1 单独检查

相关 UI 模式

在 UI 模式词典里查看组件级的实现与演示。

常见问题