便当格 Bento Grid

Bento Grid 用一组统一的行列轨道承载不同大小的内容模块：最重要的入口可以跨列占据更大区域，状态、统计和辅助入口则缩成短卡，仍然留在同一张页面里。它让信息丰富的首页既有重点，也有可扫读的全局关系。

• 跨列或跨行的主卡先回答页面最重要的问题，让用户知道从哪里开始。
• 短卡只承载一个信息任务，例如进度、人数、状态或一个辅助入口。
• 所有模块共享列轨道、间距和边界，即使尺寸不同也不会像随机拼贴。
• 窄屏不是把桌面卡片硬挤在一起，而是按主卡、状态和补充入口的阅读顺序自然堆叠。

Bento Grid 最容易被误读成“把几个圆角卡片拼在一起”。真正的重点是尺寸、位置和内容优先级之间的关系：一个主卡为什么要跨列，旁边的短卡为什么只保留一个数字或入口，都应该能从页面任务中解释。

• 如果每张卡都一样大、一样重，页面只有卡片列表，没有 Bento 的层级。
• 如果卡片大小不一样却没有共同轨道、间距和对齐，页面会像随机拼贴，扫读成本反而更高。
• 如果主卡没有承担明确的第一动作，跨列只是装饰，不能证明优先级。

所以先决定页面的阅读起点，再分配模块尺寸；不要先画出不规则形状，再把任意内容塞进去。

• 发布会式规格墙：主卡先让用户记住核心规格，续航、指标和硬件能力沿轨道补齐。
• 宠物健康首页：主卡回答当前状态，睡眠、步数和照护建议保持同屏可见。
• SaaS 特性区：四个能力模块保持接近的阅读权重，组成适合横向扫读的功能矩阵。

请制作一个 Bento Grid 风格的产品首页：先用一张跨列主卡说明用户当前最重要的任务，再用 4–5 个短模块补充进度、状态、推荐内容和下一步入口。所有模块必须共享清楚的列轨道、间距和边界；尺寸差异要对应信息优先级，不要为了不规则而不规则。请让 720px 以下切换为两列，390px 和 320px 下按主卡、状态、补充入口的顺序自然堆叠，保留可读文字和清晰的第一个动作，不产生横向滚动。