免费在线CSS Bento Grid布局生成器，可视化创建Bento网格布局，调节行列、间距、跨行跨列，实时预览一键复制CSS代码。无需注册，数据不上传服务器。 · 零依赖·可离线使用
点击预览区卡片选中，然后设置跨行跨列
CSS Bento Grid布局生成器是一个可视化工具，帮助设计师和开发者快速创建流行的Bento（便当盒）风格网格布局。通过直观的拖拽操作和参数调节，轻松实现卡片跨行跨列、大小错落的现代感布局，一键生成可直接使用的CSS和HTML代码。
创建数据可视化仪表盘，不同大小的卡片展示图表、统计和关键指标。
展示产品功能特性，大卡片突出核心功能，小卡片罗列辅助特性。
展示设计作品，不同尺寸的卡片让作品更有层次感和视觉冲击力。
Bento Grid布局得名于日式便当盒的分区排列方式。2023年Apple在iOS和macOS中大量使用这种布局后，迅速成为UI设计趋势。CSS Grid的grid-column和grid-row属性是实现Bento布局的核心，配合grid-template-columns定义列数和尺寸，即可创建灵活的不规则网格排列。
Bento Grid（便当盒布局）是一种源自日本便当盒的网格布局风格，特点是不同大小的卡片组合在一起，形成视觉上丰富而有序的排列。
Bento Grid本质是CSS Grid的应用，但强调卡片跨行跨列的不规则排列，创造视觉层次感。普通Grid通常是均匀排列，而Bento Grid追求大小错落的美感。
使用grid-column和grid-row属性，如grid-column: span 2表示跨2列，grid-row: span 2表示跨2行。也可以用grid-area指定具体位置。
适合仪表盘、产品展示页、作品集、功能介绍页等需要展示多种大小内容卡片的场景。Apple、Stripe等网站广泛使用这种布局。
移动端建议减少列数（如从4列变1-2列），取消跨列设置，改为单列堆叠。可以使用auto-fill或媒体查询实现响应式。