便当盒布局 · Bento Grid
英文：Bento Grid
页面布局难度：入门 ★
🗣️一句话大白话
用大小不同的矩形模块组成页面，靠尺寸差异建立视觉优先级。用大小不同的矩形模块组成页面。最大的区域负责展示核心内容，小模块放技能、文章、联系方式、数字或状态，依靠尺寸差异建立视觉优先级。
🎬真实场景
个人主页、产品首页、SaaS 首页、创作者网站、AI 工具展示页
📮你可以这样说
「为 Punk 设计一个 Bento Grid 个人主页， 左侧使用一张大型 Hero 卡片展示姓名、身份介绍和主要按钮，右侧使用大小不同的模块卡片展示 About、Skills、Latest Writing 和 Contact，底部放一张横向 Featured Project 卡片； 不要做成平均九宫格，要通过模块大小突出主次关系。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：Bento 就是九宫格。实际核心是模块大小差异制造主次，平均九宫格会失去重点
🚫什么时候别用
- ✗信息量很少、不需要多模块并列时
🧩常见变体
2×2 大模块跨列大卡片+小模块
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系