LAYOUT
便当格布局Bento Grid
大小不一的圆角方格严丝合缝拼成一块，重要内容占大格，次要指标占小格。
效果预览
一体化控制台数据、自动化与协作，都在这里
3×开发提速
99.9%服务可用性
12,000+团队正在使用
24/7技术支持
适合用在哪
功能总览区、仪表盘、产品特性区；想在一个区块里塞下多种信息时。
容易踩的坑
- 移动端单列堆叠后 2×2 主格变得极高，应改用 aspect-ratio 控制格子比例。
- 每格都用不同颜色和渐变，视觉噪音过大，除主格外应保持白底统一。
- 格内文字随视口缩放却不用容器查询，小格里的大号数字溢出圆角边界。
设计提示词 · Prompt
便当格布局（Bento Grid）：CSS Grid 3-4 列，gap 16px，行高 120-140px。设置 2-3 种格子尺寸形成节奏：一个 2×2 主格（品牌渐变底 + 白字，承载核心主张或产品图）、若干 1×1 指标格（大号数字 28-36px + 小号灰色说明）、一个 2×1 横格。所有格子统一 20-24px 圆角、白底 + 1px 浅描边。严禁格子之间留空隙——"严丝合缝"是这个布局的灵魂。
Bento Grid: CSS Grid with 3-4 columns, gap 16px, row height 120-140px. Set 2-3 cell sizes to form rhythm: one 2×2 main cell (brand gradient background + white text, carrying the core message or a product image), several 1×1 metric cells (large 28-36px number + small gray caption), and one 2×1 horizontal cell. All cells share a 20-24px radius, white background + 1px light stroke. Gaps between cells are strictly forbidden — "tightly fitted" is the soul of this layout.
常见搭配
同一页面里经常和「便当格布局」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-bento">
<div class="d-bento__c d-bento__c--2x2">
<div class="d-img d-img--cool" style="height:32px;border-radius:8px"></div>
<div><b>一体化控制台</b>数据、自动化与协作，都在这里</div>
</div>
<div class="d-bento__c"><b>3×</b>开发提速</div>
<div class="d-bento__c"><b>99.9%</b>服务可用性</div>
<div class="d-bento__c d-bento__c--2x1"><b>12,000+</b>团队正在使用</div>
<div class="d-bento__c"><b>24/7</b>技术支持</div>
</div>