便当网格

Bento Grid

如果你管它叫……

「那种拼块卡片」「大小不一样的卡片墙」「苹果官网那种格子」「营销页拼图布局」「一大几小的模块墙」「便当盒一样的排版」

LIVE DEMO真实可交互，动手试试

团队仪表盘

访客

12.4k

+18% this week

本周待办

项目进展

已完成 9 / 12

设计规范、Demo、双语词条

英文名: Bento Grid
别名 · 俗称: 拼块卡片墙大小不一的卡片网格Apple 风格卡片排版营销卡片拼图
Web 叫法: Bento Grid
大白话定义: 把不同大小的卡片像便当格子一样拼在一起，让重点内容更突出，页面也更有节奏。
部位拆解: 网格容器 Grid统一控制列数、间距和对齐
大小卡片 Tiles有的大有的小，用来拉开信息层级
重点块 Hero Tile面积更大，通常放核心卖点或主功能

提示词已按当前平台组织好，复制粘贴给 AI 即可

Web

做一个 Bento Grid 首屏：左上大卡放主卖点，右侧和下方放 4 张小卡，统一圆角和间距，重点卡跨两列

调试 Prompt组件不听话时用——把症状补在末尾一起发给 AI

调试我的便当网格（Bento Grid）。逐一排除：卡片高低全靠内容撑开，导致每一行边缘参差不齐；跨列卡在平板尺寸没有重排，顺序和阅读流断掉；所有卡片视觉权重一样，重点不够突出；间距不统一，整块看上去像随便堆的。症状是：