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