便当盒网格Bento Box Grid
大小不一的圆角卡片拼成紧密网格，每格承载一个独立信息点。靠尺寸对比而非分割线组织内容，移动端需重排为单列。
典型场景产品官网 · 功能总览 · 个人主页
编号39
年代2020s Apple
复杂度Low
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
大小不一的圆角卡片拼成紧密网格，每格承载一个独立信息点。靠尺寸对比而非分割线组织内容，移动端需重排为单列。
关键词
Modular cardsasymmetric gridvaried sizesApple-styledashboard tilesnegative spaceclean hierarchycards
别名
Bento GridsMasonry Grid
效果与动效
grid-template with varied spans, rounded-xl (16px), subtle shadows, hover scale (1.02), smooth transitions
设计系统变量
--grid-gap16px--card-radius24px--card-bg#FFFFFF--page-bg#F5F5F7--shadow0 4px 6px rgba(0,0,0,0.05)--hover-scale1.02配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Neutral base + brand accent, #FFFFFF, #F5F5F5, brand primary
辅色 / Secondary
Subtle gradients, shadow variations, accent highlights for interactive cards
强调色在页面底色上的对比度约 5.8:1，可用于正文与图标。
适用场景
适合 / Best For
- Dashboards
- product pages
- portfolios
- Apple-style marketing
- feature showcases
- SaaS
避开 / Do Not Use For
- Dense data tables
- text-heavy content
- real-time monitoring
框架兼容
tailwindcss-grid
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向强High
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Grid responsive (4→2→1 cols),
- Card spans varied,
- Rounded corners consistent,
- Shadows subtle,
- Content fits cards,
- Hover scale (1.02)
CSS / 技术关键词
display: grid, grid-template-columns: repeat(4, 1fr), grid-auto-rows: 200px, gap: 16px, border-radius: 24px, background: #FFFFFF, box-shadow: 0 4px 6px rgba(0,0,0,0.05)
AI 提示词
Design a Bento Box grid layout. Use: modular cards with varied sizes (1x1, 2x1, 2x2), Apple-style aesthetic, rounded corners (16-24px), soft shadows, clean hierarchy, asymmetric grid, neutral backgrounds (#F5F5F7), hover effects.