Bento grid Bento 网格
/BEN-toh GRID/ · noun · 内容类模式 · #117
由大小不一的圆角卡片拼成一个规整矩形的布局：一张大卡片旁边两张小的，下面再一张宽的，每张展示一个功能、数字或图片。名字来自日本便当盒的分格，常用在落地页上集中展示产品功能。
你可能会这样叫它
- “落地页上大小不一的卡片网格”
- “像便当盒一样分格的布局”
- “苹果风格的功能卡片墙”
……它的名字是 Bento 网格（Bento grid）。
代码里叫什么
| Web (CSS) | display: grid grid-template-areas grid-column: span 2 |
|---|---|
| Tailwind CSS | grid col-span-2 row-span-2 |
| SwiftUI | Grid GridRow .gridCellColumns(_:) |
| Jetpack Compose | LazyVerticalGrid GridItemSpan |
复制给 AI 编程工具
把这些功能排成 Bento 网格：四列、间距一致的 CSS 网格，最重要的功能占 2×2 的大卡片，两个次要功能各占 1×1，一张 2×1 的宽卡片放数据或截图。所有卡片圆角和内边距一致，每张只讲一件事；手机上收成单列，卡片按阅读顺序排列。