搭骨架
便当网格
Bento Grid
「那种拼块卡片」「大小不一样的卡片墙」「苹果官网那种格子」「营销页拼图布局」「一大几小的模块墙」「便当盒一样的排版」
LIVE DEMO真实可交互，动手试试
团队仪表盘
本周增长概览
营收
$84.2k
线索
1,248
转化
6.8%
访客
12.4k
+18% this week
本周待办
6
优化 onboarding 卡片，并补齐搜索面板的状态细节。
项目进展
路线图与完成状态
已完成 9 / 12
设计规范、Demo 和双语词条已经上线。
- 英文名
- Bento Grid
- 别名 · 俗称
- 拼块卡片墙大小不一的卡片网格Apple 风格卡片排版营销卡片拼图
- Web 叫法
- Bento Grid
- 大白话定义
- 把不同大小的卡片像便当格子一样拼在一起，让重点内容更突出，页面也更有节奏。
- 部位拆解
- 网格容器 Grid统一控制列数、间距和对齐
- 大小卡片 Tiles有的大有的小，用来拉开信息层级
- 重点块 Hero Tile面积更大，通常放核心卖点或主功能
提示词已按当前平台组织好，复制粘贴给 AI 即可
Web
做一个 Bento Grid 首屏：左上大卡放主卖点，右侧和下方放 4 张小卡，统一圆角和间距，重点卡跨两列
调试 Prompt组件不听话时用——把症状补在末尾一起发给 AI
调试我的便当网格（Bento Grid）。逐一排除：卡片高低全靠内容撑开，导致每一行边缘参差不齐；跨列卡在平板尺寸没有重排，顺序和阅读流断掉；所有卡片视觉权重一样，重点不够突出；间距不统一，整块看上去像随便堆的。症状是：