便当盒网格
Bento Grid
别名:便当盒布局便当格网格Bento网格苹果发布会那种格子布局拼块仪表盘不等宽卡片网格Bento Box LayoutBento Grid
这是什么
把界面装进便当盒的布局语言：一组圆角矩形像分格便当一样拼合，各格跨度不同 ——大格承载主内容，小格陈列数据与点缀，格与格之间留窄缝对齐同一套网格。 它是卡片网格的升级：用面积差异直接表达信息优先级。
开发规格
字体
系统无衬线，卡片内大数字
色彩
浅灰底 #F5F5F7 × 白卡 × 紫 #5B5BD6
边框
1px #E5E7EB 卡片描边
阴影
1px 微投影保持层次
间距
16px 圆角 + 10px 网格间距
动效
160–200ms ease-out 的卡片抬升与阴影过渡
状态反馈
hover 轻微上浮并加深投影；focus 用紫色可见外框；active 回落到平面；disabled 降不透明；error 用红色描边
风格演示
先看整页效果，再试交互场景整页预览
高效生活
从有序开始
Tasko 帮助你整合任务、笔记与日程，让每一天都更专注、更有意义。
开始使用 →
也是一种伟大Keep going →
交互场景
正在加载演示…
✓ 适用场景
- 仪表盘 个人主页 产品概览，内容模块多且优先级分明
- 功能特性展示页，一格一卖点整齐陈列
- 想用面积对比引导视觉动线，避免均质卡片海洋
✕ 不适用场景
- 内容长度不可控时，格子会被撑破或大量留空
- 小屏只放得下一列，便当结构失去意义
- 顺序阅读的长文场景，网格拼接会打断叙事
常见形式
发布会式
Keynote
苹果发布会风格，大图大字大格子
仪表盘式
Dashboard
数据格为主，迷你图表与指标卡拼合
个人主页式
Profile
头像 简介 社交链接混搭的个人便当
实现要点
display: gridgrid-template-columns: repeat(4, 1fr)grid-auto-rowsgrid-column: span 2border-radius: 16pxgap先定网格再装内容：常用 4 列（移动端 2 列）× 若干等高行，行高用 grid-auto-rows 固定；主格 span 2×2，次格 2×1 或 1×1；gap 收窄到 8～16px 保证"一整盒"的整体感；所有格子统一圆角（14～20px）与内边距（16～24px）。 每格只放一个主题：大格做主视觉，小格做指标；格子数量 5～9 个为宜， 少于 4 个失去拼贴感，多于 10 个变成仪表盘噪音。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
在当前项目中用便当盒网格（Bento Grid）实现一个概览区块。 先检查现有栅格 断点与卡片组件，复用现有间距与圆角变量。 要求： - 一套统一网格，格子按 span 拼合，gap 窄缝对齐 - 每格一个主题，层级靠面积表达 - 圆角 内边距全格统一，整体像一个便当盒 - 移动端降级为 2 列或单列不破格 - 支持深色模式 - 不新增任何依赖 完成后运行项目现有检查，并列出修改的文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件影响组件以"少即是多"为准则的视觉语言：用大量留白、克制的黑白灰配色与有限字体层级 来凸显内容本身，删除一切装饰性元素，层级完全依靠空间、字重与疏密建立。 安静、克制、内容至上是它的气质。
风格相似概念用半透明磨砂玻璃质感表示悬浮层级的视觉语言：backdrop-filter 背景模糊 + 低透明度 填充 + 一圈细窄的白色高光描边，让面板像磨砂玻璃片一样透出底下的色彩与图形。 它强调"层"——玻璃之下必须有可透出的丰富背景，否则质感无从谈起。
风格相似概念把关键数据与操作入口聚在一屏内的后台首页，用区域化网格组织：顶栏与侧栏负责导航， 中部依次铺指标卡、图表区和主表格，让用户打开就能看到系统当前状态并直接下钻。 它是后台产品信息架构的核心页面，密度与分区方式决定了整站的阅读节奏。
页面搭配使用用大面积流动渐变光斑营造氛围的视觉语言：青绿 紫 蓝 多色模糊色块在背景 中缓慢漂移融合，前景内容保持极简克制。色彩是主角——像极光一样柔和 跨 色相 渐次过渡，界面因此获得呼吸感与情绪温度。
风格相似概念