层级卡片网格 · Bento / Hierarchical Grid
英文：Bento / Hierarchical Grid
网格与版式难度：入门 ★
🗣️一句话大白话
不同尺寸的矩形区块共享统一间距与圆角，通过卡片面积表达信息优先级。最大卡片先读，随后按相邻关系在小卡片间跳转；同层卡片的语义与间距需要一致。
🖼️样图参考
🎬真实场景
科技、产品功能、数据、服务组合、HTML 落地页
📮你可以这样说
「【图像模型版】竖版 3:4 海报，主题为[主题]。采用 Bento 层级卡片网格：5~7 个圆角矩形区块拼合，最大区块约占 40% 面积并承载核心信息，其余按重要度递减；所有卡片共用统一间距与圆角半径，卡片内信息密度克制。避免随意拼方块、避免每张卡风格不一。Keywords: bento grid, hierarchical cards, variable-span grid, rounded modules. 【HTML/CSS 版】容器 display:grid，grid-template-columns:repeat(4,1fr)，gap:16px；主卡 grid-column:span 2、grid-row:span 2，次卡 span 1×2 或 2×1；全部 border-radius:16px、padding:20px，背景一深多浅区分主次。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸不是随意拼方块；同层卡片要有一致语义
- ▸卡片数量超过 7 个会失去层级
🧩常见变体
深色主卡版全浅色等圆角卡片内嵌小网格
💡小贴士
- ✦面积就是优先级：先决定谁进最大的卡
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
🛠️关联 AI 绘图知识
在「AI 绘图工作台」查看该术语的提示词与案例（需本地启动工作台，端口 5345）