BENTO GRIDS · 模块化布局

像便当一样，
把内容装进格子里

1×1、2×1、2×2——大小穿插的圆角卡片各司其职，一眼看清全部重点，Apple 发布会同款版式。

浏览格子查看色板

2×2 主格

最大的格子放最重要的信息，渐变只出现在这一处。

98.5%布局满意度

1×1 小格

一个格子只说一件事。

自动重排

窄屏时格子优雅换行。

类别 · 通用风格年代 · 2020s Apple / Linear 复杂度 · 低 最适合 · 产品特性页 · 仪表盘 · 个人主页 · 营销摘要

FEATURES

为什么用便当网格

格子有大小，信息有主次。柔和的 #F5F5F7 底色上，白色卡片以 20px 间距整齐排列。

不等大栅格

CSS Grid 的 span 让重点内容占 2×2、次要信息占 1×1，层级由面积直接表达，无需更多装饰。

圆角与柔影

24px 圆角加两层极轻阴影，卡片像悬浮在纸面上 2mm。

悬停微缩放

hover 时 scale(1.02) 且阴影舒展，反馈轻到几乎察觉不到。

CONTROLS

按钮与控件

胶囊按钮、iOS 式开关与浅色徽标，全部走 300ms 平滑缓动。

自动整理格子

已同步

订阅版式周报

每周一份便当：三个布局灵感、两个组件拆解、一个可复制的栅格配方。

PALETTE

配色板

低饱和的中性底色承托内容，强调色只在按钮与链接上出现。

米灰底#F5F5F7

卡片白#FFFFFF

墨石黑#1D1D1F

点缀渐变#0A84FF → #BF5AF2

TYPOGRAPHY

字体级阶

显示级 · Inter ExtraBold 800 · 52px · -3%

格子的艺术

标题 · Inter Bold 700 · 26px

一格一事，主次分明

正文 · Inter Regular 400 · 16px / 1.65

正文保持系统级的克制：深灰文字、适中行高，与圆角卡片一起构成安静的阅读节奏。

标签 · Inter SemiBold 600 · 13px · 字距 0.14em

BENTO GRID SYSTEM

像便当一样，把内容装进格子里