你可能会说
我想用Bento 布局的设计语言，帮我实现。
像日本便当盒一样的网格布局——大小不一的卡片紧凑排列，信息密度高又有序。
像日本便当盒一样的网格布局——大小不一的卡片紧凑排列，信息密度高又有序。
生活类比
像便当盒——米饭、菜、水果各占一格，大小不同但整齐排列。
🎮 动手试试
关于「Bento 布局」，以下哪个描述最准确？
你可以这样告诉 AI
帮我把首页改成 Bento 网格布局：用 CSS Grid 做大小不一的卡片排列，主推功能占 2×2 大格，次要信息占 1×1 小格，紧凑有序像便当盒那样。
Bento 布局是一种视觉设计模式——大小不一的卡片像便当盒一样排列；CSS Grid 是底层实现技术，用来写出 Bento 布局的具体 CSS。一个是设计理念，一个是实现工具。
产品功能展示页
适合 SaaS 首页、App 介绍页——用大小不一的卡片展示不同权重的功能模块，主推功能占大格、辅助信息占小格，像 Apple Keynote 的信息图一样直观。
和 AI 协作时
想让 AI 做 Bento 布局，直接说「用 bento grid 布局：大小不一的卡片网格，大卡片放重点内容、小卡片放辅助信息，用 CSS Grid 实现，紧凑有序像便当盒」。
等权内容列表
商品列表、文章列表等所有项目权重相同的内容不适合 Bento——它的大小格子暗示内容有主次之分，等权列表用整齐统一的网格更合理。
与移动端优先的复杂导航无关
手机屏幕窄，Bento 的大小不一卡片在小屏上会变成混乱的堆叠。移动端主导的项目更适合简单的单列或两列等宽网格布局。
像日本便当盒一样的网格布局——大小不一的卡片紧凑排列，信息密度高又有序。
像便当盒——米饭、菜、水果各占一格，大小不同但整齐排列。
和 AI 沟通时提到「用 bento grid 布局」，就是做大小不一的卡片网格排列。