{ "id": "bento-grid", "type": "styles", "status": "published", "name": { "zh": "便当盒网格", "en": "Bento Grid" }, "aliases": [ "便当盒布局", "便当格网格", "Bento网格", "苹果发布会那种格子布局", "拼块仪表盘", "不等宽卡片网格", "Bento Box Layout", "Bento Grid" ], "category": [ "Style", "Layout" ], "description": { "zh": "把界面装进便当盒的布局语言：一组圆角矩形像分格便当一样拼合，各格跨度不同 ——大格承载主内容，小格陈列数据与点缀，格与格之间留窄缝对齐同一套网格。 它是卡片网格的升级：用面积差异直接表达信息优先级。", "en": "A layout language that packs the interface like a bento box: rounded tiles of varying spans snap to one grid with narrow gutters — big cells carry the hero content, small cells hold stats and garnish. A card-grid upgrade where area itself encodes priority." }, "use_when": [ { "zh": "仪表盘 个人主页 产品概览，内容模块多且优先级分明", "en": "Dashboards, profile pages and product overviews with mixed-priority modules" }, { "zh": "功能特性展示页，一格一卖点整齐陈列", "en": "Feature showcases — one tile, one selling point" }, { "zh": "想用面积对比引导视觉动线，避免均质卡片海洋", "en": "Guiding the eye with area contrast instead of uniform card rows" } ], "avoid_when": [ { "zh": "内容长度不可控时，格子会被撑破或大量留空", "en": "Unpredictable content lengths that overflow or hollow out tiles" }, { "zh": "小屏只放得下一列，便当结构失去意义", "en": "Narrow screens that collapse to one column and void the bento structure" }, { "zh": "顺序阅读的长文场景，网格拼接会打断叙事", "en": "Sequential long-form reading where tiling breaks the narrative" } ], "tags": [ "bento", "grid", "layout", "tiles", "dashboard" ], "variants": [ { "id": "keynote", "name": { "zh": "发布会式", "en": "Keynote" }, "note": { "zh": "苹果发布会风格，大图大字大格子", "en": "Apple keynote style — big tiles, big type, product heroes" } }, { "id": "dashboard", "name": { "zh": "仪表盘式", "en": "Dashboard" }, "note": { "zh": "数据格为主，迷你图表与指标卡拼合", "en": "Data-first — stat tiles and mini charts packed together" } }, { "id": "profile", "name": { "zh": "个人主页式", "en": "Profile" }, "note": { "zh": "头像 简介 社交链接混搭的个人便当", "en": "Personal bento mixing avatar, bio and link tiles" } } ], "applicable_components": [ "card", "avatar", "progress-bar", "badge", "table" ], "related": [ { "id": "card", "relation": "affects" }, { "id": "minimalism", "relation": "similar_to" }, { "id": "glassmorphism", "relation": "similar_to" }, { "id": "dashboard", "relation": "used_with" }, { "id": "aurora", "relation": "similar_to" } ], "demo": { "component": "bento-grid", "modes": [ "default", "dark", "variants" ] }, "playground": { "task": { "zh": "开始使用与免费注册进入本地工作区；切换日历月份和日期，新增/完成任务，编辑保存笔记；登录说明演示身份，不伪装真实注册或云同步。", "en": "Get started opens the local workspace. Change calendar month and date, add/complete tasks and edit/save notes. Login explains demo identity without claiming real signup or cloud sync." }, "checks": [ { "zh": "逐一操作 ◉ Tasko 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。", "en": "Use ◉ Tasko’s original navigation and primary CTAs; inspect content and return paths, not just click notices." }, { "zh": "完成上述 ◉ Tasko 操作后修改输入或撤销，检查结果与状态同步。", "en": "Complete the ◉ Tasko task, then change inputs or undo and inspect the matching result/state." }, { "zh": "用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。", "en": "Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries." } ] }, "sources": [ { "name": "Bento Grids — gallery of bento layouts", "url": "https://bentogrids.com/" }, { "name": "Apple Newsroom", "url": "https://www.apple.com/newsroom/" } ], "implementation": { "css": [ "display: grid", "grid-template-columns: repeat(4, 1fr)", "grid-auto-rows", "grid-column: span 2", "border-radius: 16px", "gap" ], "notes": { "zh": "先定网格再装内容：常用 4 列（移动端 2 列）× 若干等高行，行高用 grid-auto-rows 固定；主格 span 2×2，次格 2×1 或 1×1；gap 收窄到 8～16px 保证\"一整盒\"的整体感；所有格子统一圆角（14～20px）与内边距（16～24px）。 每格只放一个主题：大格做主视觉，小格做指标；格子数量 5～9 个为宜， 少于 4 个失去拼贴感，多于 10 个变成仪表盘噪音。", "en": "Grid first, content second: typically 4 columns (2 on mobile) with grid-auto-rows fixing row height; hero cells span 2×2, secondary 2×1 or 1×1; keep gap tight at 8–16px so the box reads as one object; unify radii (14–20px) and padding (16–24px) across cells. One topic per tile — heroes big, stats small. Aim for 5–9 tiles: fewer than 4 loses the collage, more than 10 becomes dashboard noise." } }, "prompts": { "basic": { "zh": "用便当盒网格（Bento Grid）布局设计界面：圆角格子按不同跨度拼合在一套 网格上，大格承载主内容，小格陈列指标与点缀，窄缝对齐。", "en": "\"Design an interface with a Bento Grid layout: rounded tiles of varying spans on one grid, big cells for hero content, small cells for stats and garnish, tight aligned gutters.\"" }, "design": { "zh": "便当盒布局设计规范：4 列网格（移动端 2 列），grid-auto-rows 固定行高； 主格 2×2，辅助格 2×1 或 1×1；gap 12px，圆角统一 16px，内边距统一 20px； 格内一题一格，层级靠面积不靠边框；格子底色可用纯色 浅灰或深色卡面， 主格可承载图片或渐变；总格数控制在 5～9 个。", "en": "\"Bento spec: a 4-column grid (2 on mobile) with fixed grid-auto-rows; hero cells 2×2, secondary 2×1 or 1×1; 12px gap, uniform 16px radii and 20px padding; one topic per tile; hierarchy via area, not borders; tile fills in solid, light grey or dark card tones, heroes may carry imagery or gradients; 5–9 tiles total.\"" }, "implementation": { "zh": "用当前风格完成 ◉ Tasko 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。preview.brand 与共享 REFERENCE_BRANDS 保持一致；首屏结构、实际导航与素材以 ReferenceStyleScene 为准。\n\n按 Tasko 原拼格保留 .tasko-body 的 32% / 14.5% / 14.5% / 35% 列宽、13.6cqw / 11.8cqw 两行和 1.15cqw 间隙；主介绍跨两行，日历跨中间两列，右侧为绿色统计与雪山拼图，下方任务/笔记是独立入口。使用浅蓝/淡紫/浅绿不同卡底与现有 1.65cqw 圆角，不重画为等宽四列、96px 等高行或统一紫色卡片。实际月份需要六周时使用已有增高规则；600px 以下主块跨全宽、任务和笔记保留两列配对。\n\n开始使用与免费注册进入本地工作区；切换日历月份和日期，新增/完成任务，编辑保存笔记；登录说明演示身份，不伪装真实注册或云同步。\n\n静态封面、详情演示与 /style-scenes/bento-grid/（英文 /en/style-scenes/bento-grid/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。", "en": "Build a complete ◉ Tasko page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. Keep preview.brand aligned with shared REFERENCE_BRANDS; ReferenceStyleScene defines the hero structure, actual navigation and assets.\n\nPreserve Tasko’s .tasko-body columns at 32% / 14.5% / 14.5% / 35%, rows at 13.6cqw / 11.8cqw and 1.15cqw gaps. The intro spans both rows; the calendar spans the middle columns; green stats and a mountain tile occupy the right, with separate task/note entries below. Keep the distinct pale blue/lilac/green fills and 1.65cqw radii, not equal-width columns, fixed 96px rows or uniformly purple cards. Use the existing height adjustment for six-week months; below 600px major tiles span the width while tasks and notes remain paired.\n\nGet started opens the local workspace. Change calendar month and date, add/complete tasks and edit/save notes. Login explains demo identity without claiming real signup or cloud sync.\n\nShare one renderer between static covers, the detail experience and /style-scenes/bento-grid/ (English /en/style-scenes/bento-grid/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts.\n\nInteraction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves.\n\nProvide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion." }, "agent": { "zh": "用当前风格完成 ◉ Tasko 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。preview.brand 与共享 REFERENCE_BRANDS 保持一致；首屏结构、实际导航与素材以 ReferenceStyleScene 为准。\n\n按 Tasko 原拼格保留 .tasko-body 的 32% / 14.5% / 14.5% / 35% 列宽、13.6cqw / 11.8cqw 两行和 1.15cqw 间隙；主介绍跨两行，日历跨中间两列，右侧为绿色统计与雪山拼图，下方任务/笔记是独立入口。使用浅蓝/淡紫/浅绿不同卡底与现有 1.65cqw 圆角，不重画为等宽四列、96px 等高行或统一紫色卡片。实际月份需要六周时使用已有增高规则；600px 以下主块跨全宽、任务和笔记保留两列配对。\n\n完整页面操作：\n开始使用与免费注册进入本地工作区；切换日历月份和日期，新增/完成任务，编辑保存笔记；登录说明演示身份，不伪装真实注册或云同步。\n\n静态封面、详情演示与 /style-scenes/bento-grid/（英文 /en/style-scenes/bento-grid/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。\n\n不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。", "en": "Build a complete ◉ Tasko page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. Keep preview.brand aligned with shared REFERENCE_BRANDS; ReferenceStyleScene defines the hero structure, actual navigation and assets.\n\nPreserve Tasko’s .tasko-body columns at 32% / 14.5% / 14.5% / 35%, rows at 13.6cqw / 11.8cqw and 1.15cqw gaps. The intro spans both rows; the calendar spans the middle columns; green stats and a mountain tile occupy the right, with separate task/note entries below. Keep the distinct pale blue/lilac/green fills and 1.65cqw radii, not equal-width columns, fixed 96px rows or uniformly purple cards. Use the existing height adjustment for six-week months; below 600px major tiles span the width while tasks and notes remain paired.\n\nFull-page operations:\nGet started opens the local workspace. Change calendar month and date, add/complete tasks and edit/save notes. Login explains demo identity without claiming real signup or cloud sync.\n\nShare one renderer between static covers, the detail experience and /style-scenes/bento-grid/ (English /en/style-scenes/bento-grid/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts.\n\nInteraction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves.\n\nProvide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion.\n\nAdd no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results." } }, "style_spec": { "typography": { "zh": "系统无衬线，卡片内大数字", "en": "System sans with big in-card numerals" }, "color": { "zh": "浅灰底 #F5F5F7 × 白卡 × 紫 #5B5BD6", "en": "Light grey #F5F5F7, white cards, violet #5B5BD6" }, "border": { "zh": "1px #E5E7EB 卡片描边", "en": "1px #E5E7EB card borders" }, "shadow": { "zh": "1px 微投影保持层次", "en": "1px micro shadows for depth" }, "spacing": { "zh": "16px 圆角 + 10px 网格间距", "en": "16px radius, ~10px grid gaps" }, "motion": { "zh": "160–200ms ease-out 的卡片抬升与阴影过渡", "en": "160–200ms ease-out card lift and shadow transition" }, "states": { "zh": "hover 轻微上浮并加深投影；focus 用紫色可见外框；active 回落到平面；disabled 降不透明；error 用红色描边", "en": "Hover lifts slightly and deepens the shadow; focus shows a visible violet ring; active settles back flat; disabled reduces opacity; error uses a red border" } }, "preview": { "order": 5, "keywords": { "en": "MODULAR & FLEX", "zh": "模块化 · 一切尽在掌控" }, "url": "https://tasko.app", "scene": "tasko", "brand": "◉ Tasko", "nav": [ { "zh": "产品", "en": "Product" }, { "zh": "模板", "en": "Templates" }, { "zh": "资源", "en": "Resources" }, { "zh": "定价", "en": "Pricing" } ], "navExt": [ { "zh": "登录", "en": "Log in" }, { "zh": "免费注册", "en": "Sign up free" } ], "heroTitle": { "zh": "高效生活", "en": "Productive living" }, "heroTitle2": { "zh": "从有序开始", "en": "starts with order" }, "heroSub": { "zh": "Tasko 帮助你管理任务、笔记与日程，让每一天更专注、更有意义。", "en": "Tasko organizes tasks, notes and schedules for more focused, meaningful days." }, "cta": { "zh": "开始使用 →", "en": "Get started →" }, "features": [ { "t": { "zh": "任务 5", "en": "Tasks 5" }, "s": { "zh": "今日待完成", "en": "Due today" } }, { "t": { "zh": "笔记 12", "en": "Notes 12" }, "s": { "zh": "记录灵感", "en": "Capture ideas" } }, { "t": { "zh": "专注 3h24m", "en": "Focus 3h24m" }, "s": { "zh": "比上周 +40%", "en": "+40% from last week" } } ], "tokens": { "bg": "#F5F5F7", "fg": "#17181C", "sub": "#83858D", "accent": "#5B5BD6", "accentFg": "#fff", "card": "#FFFFFF", "cardBorder": "#E5E7EB", "radius": "16px", "shadow": "0 1px 3px rgba(0,0,0,.06)", "font": "'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif" } } }