Bento Grid Generator

Bento Grid Generator是一款基于浏览器的可视化拖拽工具，专注于帮助用户快速创建Bento风格的网格布局。用户只需在画布上拖入卡片、图片、文字或按钮等模块，即可在实时预览中看到排版效果，省去手写CSSgrid代码的繁琐步骤。工具内置多种预设模板，支持响应式设计，完成后可一键导出HTML与CSS代码或JSON配置文件，适合设计师和开发者快速完成模块化页面布局。

详细介绍

Bento Grid Generator把Bento网格这个概念变成了一套可视化的操作流程。Bento风格源自苹果产品页和演示文稿中常见的模块化卡片布局，特点是大小卡片错落排布、信息密度高但视觉秩序清晰。传统做法需要前端开发者手写CSSgrid代码，反复调整行列位置和断点样式，过程比较耗时。这个工具的思路是让用户在画布上直接拖拽卡片，实时看到效果，不需要接触底层代码。

工具的核心是一块12×6的网格画布，卡片以网格单元为单位占据位置。用户可以从工具栏添加卡片，选择方形、宽形、竖形或大尺寸四种规格，然后拖动卡片到画布上的任意位置。当拖到已被占用的位置时，系统会自动进行卡片交换或位置让位，避免重叠。每张卡片的背景色、背景图、边框、文字内容、文字颜色、对齐方式等都可以在编辑面板中单独设置，改动实时预览。完成后可以导出PNG图片、JSON配置文件，或者直接复制生成的HTML和CSS代码，粘贴到现有项目中继续加工。

官网入口地址

https://bento-generator.com/Bento

下载地址

该工具为在线网页平台，无需下载安装即可使用。同时项目在GitHub上开源，仓库地址为https://github.com/aruntemme/bento-generator，开发者可以克隆代码在本地运行或自行部署。

功能介绍

拖拽式编辑：所有布局单元以可调大小的卡片形式呈现，支持自由拖动、复制、删除和层级管理。拖拽过程中，系统会实时判断目标位置是否合法，合法位置显示绿色轮廓，非法位置显示红色高亮，帮助用户避免误操作。

智能网格系统：画布采用12×6网格，单元格尺寸80像素，单元格间距16像素，整体画布保持16:9比例，约1024×576像素。卡片有方形1×1、宽形2×1、竖形1×2、大尺寸2×2四种规格，覆盖常见的Bento布局需求。

智能卡片交换与让位：当用户把卡片拖到已有卡片占据的位置时，系统会根据情况执行简单交换、沿行或列智能推移，或者更复杂的多卡片重排，最终保证画布上没有重叠。

样式定制：每张卡片支持纯色填充、背景图片、仅边框样式三种背景风格，可以单独设置边框颜色和宽度。文字方面支持自定义内容、颜色、字号、水平对齐、垂直对齐以及横竖排方向。

导入导出与保存：用户可以把当前布局保存到浏览器本地存储，随时加载继续编辑。导出方面支持PNG高清图片、JSON配置文件，方便分享或在他项目中使用。

预设模板：内置PortfolioPro、SocialLinks、Photography、DesignStudio、ProductShowcase等模板，用户可以直接选用，在此基础上微调尺寸、颜色、间距等属性。

响应式与移动端适配：画布保持16:9比例，自动适配不同屏幕宽度。移动端工具栏会折叠为下拉菜单，支持触mō拖拽操作。

技术栈与性能：项目基于React18、TypeScript、Vite、TailwindCSS构建，使用html2canvas实现图片导出。卡片组件使用了React.memo和useCallback等优化手段，拖拽操作通过requestAnimationFrame节流，碰撞检测包含提前退出条件，整体运行流畅。

应用场景

企业后台或SaaS产品：快速搭建仪表盘、数据卡片、功能入口的模块化布局，把不同指标或功能入口组织成清晰的网格结构。

电商首页：通过产品展示网格模板，提升商品陈列的视觉层次感，让促销信息、分类入口和推荐商品各得所。

个人作品集：利用图片画廊模板，轻松组织项目截图或设计稿，以卡片大小变化体现内容的主次关系。

营销落地页：在短时间内组合文字、按钮、视频背景等元素，生成富有视觉冲击力的页面结构。

教学与演示：Bento风格的布局在课件和演示文稿中越来越常见，用这个工具可以快速搭出结构清晰的信息展示页。

使用方法

打开官网后，画布默认呈现一块空的12×6网格。点击工具栏的AddCard按钮添加卡片，选择需要的尺寸，卡片会自动放置在第一个可用位置。点击卡片上的编辑按钮，可以修改背景、文字、边框和对齐方式，改动实时预览，确认后保存。拖动卡片可以调整位置，系统自动处理卡片之间的交换和让位。点击调整大小按钮可以在可用尺寸之间循环切换。删除按钮直接移除卡片。

完成布局后，点击Save输入名称保存到本地，点击Load从已保存的布局中加载。点击Export导出PNG图片，点击More中的ExportJSON导出配置文件，Import可以导入之前导出的JSON文件。点击Templates可以选择预设模板，模板卡片会立即加载到画布上，用户可以在此基础上继续调整。

对于开发者，如果希望在本地运行，可以克隆GitHub仓库，安装Node.js16或更高版本，执行npminstall安装依赖，然后npmrundev启动开发服务器，在浏览器中访问http://localhost:5173即可。

服务支持

Bento Grid Generator以在线网页形式免费开放使用，没有注册门槛，打开浏览器即可开始设计。项目采用MIT许可证开源，开发者可以自由使用、修改和分发代码。项目作者提供了GitHubIssues和Discussions作为反馈渠道，用户可以在那里报告问题或提出功能建议。从路线图来看，后续计划加入撤销重做、键盘快捷键、自定义网格尺寸、渐变背景、图标库集成、动画预设、协作编辑、云存储、导出React/HTML代码以及深色模式等功能。

关于定价，目前工具本身免费，没有会员订阅机制。项目页面中出现了BuyMeaCoffee的入口，属于自愿打赏性质，不影响功能使用。网站启用了PostHog匿名使用分析，默认情况下分析是关闭的，只有在部署者主动配置环境变量后才会启用，并且支持通过DoNotTrack选项退出。