Bento 格布局 Bento Grid

大小不一的圆角卡片拼成的网格，像日式便当盒的分格

2×2

1×1

2×1

1×1

**Bento 格布局（Bento Grid）**以日式便当盒命名：一个容器里划分出大小不同的格子，重点内容占大格、次要内容占小格，每格都是独立的圆角卡片。它 2023 年起席卷 Apple 官网、Linear 这类产品的首页，是“信息密度高但依然精致”的解法。

什么时候用：产品首页的功能矩阵、Dashboard 总览页、作品集。要求内容天然可拆成独立卡片块——强叙事的线性内容不适合。

对 AI 说清楚的三要素：① 基础网格列数（3~~4 列）；② 关键块跨度（span 2×2 / 2×1）；③ 统一圆角（16~~20px）与 gap，靠留白不靠边框。

首页模块采用 Bento Grid 布局：CSS Grid 基础 3~4 列，
关键模块 span 2×2 或 2×1 占据大格，其余 1×1 小格，
统一 16~20px 大圆角与等间距 gap，内容密度高低错落。