Draw and resize blocks right on the canvas, then export clean Tailwind CSS classes or raw HTML/CSS — no boilerplate, no guesswork.
Create modern bento-style grid layouts visually with the CSS Bento Grid Generator. Instead of manually calculating CSS Grid columns, rows, gaps, and block spans, you can design your layout directly on an interactive canvas. Add blocks, drag them into position, resize them, change their labels and colors, and export the finished layout as Tailwind CSS or raw HTML/CSS.
Bento grids are useful for dashboards, landing pages, portfolios, feature sections, application interfaces, and modern web designs. This tool gives you a simple way to experiment with different layouts before adding the generated code to your project.
A bento grid is a layout made from multiple content blocks arranged inside a CSS Grid. Individual blocks can have different widths and heights, creating an asymmetric design similar to the compartments of a bento box.
For example, one block can span two or three columns while another block
occupies only one column. This makes it possible to create visually
interesting layouts while keeping content organized and aligned.
Manually creating these layouts often requires adjusting
grid-column, grid-row, gaps, and dimensions.
A visual generator simplifies this process.
Imagine that you want to create a dashboard with six sections: Analytics Overview, Users, Revenue, Tasks, Messages, and Activity Feed.
Start by setting the grid to 4 columns and 4 rows. Set the gap to a value that gives your cards enough visual separation, then choose a corner radius that matches the style of your website.
Add six blocks to the canvas and give each one a descriptive label. Make the Analytics Overview block larger by increasing its column and row spans. Keep Users and Revenue as smaller cards, then arrange Tasks, Messages, and Activity Feed around them.
Once the layout looks correct, open the export section and choose Tailwind CSS if your project uses Tailwind. The generator will produce the corresponding grid and block utility classes. You can copy the generated code or download the HTML file.
The generator supports two export formats so you can use the layout with different development workflows.
Choose Tailwind CSS when your project already uses Tailwind utility classes. The generated code provides grid and styling classes that can be adapted to your existing components and design system.
Choose Raw HTML/CSS when you are building a traditional HTML project or using your own CSS stylesheet. The generated markup and styles provide a starting point that you can customize for your website.
Check the selected block's width and height values. The size of each block depends on its column and row spans within the configured grid.
Increase the grid gap or reduce the number of blocks. You can also simplify the layout by giving the most important sections more space.
Review the position and size of your blocks. Increase the span of existing blocks or add another block to make better use of the available grid area.
Check the block's position and dimensions. Reduce its column or row span or move it to an available area of the grid.
The exported code is a starting point for your layout. You may need to modify it for your project's responsive breakpoints, components, typography, colors, and existing CSS or Tailwind configuration.
Creating a bento-style interface does not require manually calculating every grid span. The CSS Bento Grid Generator provides an interactive canvas where you can experiment with columns, rows, spacing, block sizes, colors, and labels before exporting the result.
Whether you are creating a dashboard, portfolio, landing page, or application interface, you can design the layout visually and export it as Tailwind CSS or raw HTML/CSS. Start with a simple grid, arrange your blocks, refine the spacing and sizing, and export the code when your layout is ready.