Build a bento-style CSS grid layout by clicking and dragging to merge cells, then copy the ready-made CSS and HTML — no signup, no code editor required.
Click and drag across cells to merge them into a bento box. Click a merged box’s × to split it.
How It Works
A bento grid is a CSS Grid layout made up of boxes of different sizes arranged edge-to-edge, like the compartments in a bento box — a large hero tile next to a cluster of smaller ones, all sitting on the same underlying grid.
This tool builds that layout on top of a standard display: grid container. Setting the column and row counts defines the grid’s structure, and dragging across cells merges them into a single box by extending its grid-column and grid-row values — the same technique used to build bento layouts by hand, just without writing the coordinates yourself.
Each box in the output maps to one .wpex-bento-item with its own grid-column and grid-row placement, sitting inside a shared .wpex-bento-container. Gap and border-radius controls apply globally, and the generated CSS includes a mobile breakpoint that collapses every box into a single column so the layout doesn’t break on smaller screens.
When to Use a Bento Grid
- Portfolio and agency sites — a bento layout is a fast way to showcase mixed content (a featured project next to smaller case studies) without custom layout code for every section.
- Landing page feature sections — bento grids are a common pattern for presenting a handful of product features or benefits at different visual weights, drawing the eye to the most important one first.
- WordPress block themes — since the output is plain CSS Grid, it drops cleanly into a Group block, a theme template part, or a custom block style without any plugin dependency.
FAQ
What is a bento grid?
A bento grid is a layout made of grid cells of varying sizes arranged into a single unified grid, named after the compartmentalized look of a Japanese bento box. It’s built with standard CSS Grid — there’s no separate “bento” technology, just deliberate use of grid-column and grid-row spans.
How do I make a bento grid in CSS?
Define a grid container with display: grid and a fixed number of columns and rows, then give each item a grid-column and grid-row value that spans more than one track where you want a larger box. This tool generates those values automatically based on which cells you merge.
Is a bento grid different from a regular CSS grid?
No — a bento grid is a design pattern, not a separate CSS feature. It’s a standard CSS Grid layout where box sizes are intentionally varied rather than uniform, which is what gives it the “bento box” look.
Can I use this bento grid generator output in WordPress?
Yes. The generated CSS and HTML are plain, framework-free code that can be pasted into a Custom HTML block, added to a child theme’s stylesheet, or adapted into a reusable block style — it doesn’t depend on any specific theme or plugin.
What’s the difference between a bento grid and a masonry layout?
A bento grid uses a fixed, predefined arrangement of box sizes on a structured grid, while masonry layouts flow items into columns based on available vertical space, often producing an irregular, unplanned-looking result. Bento grids are deliberately composed; masonry is algorithmically packed.
Does this tool work on mobile devices?
The generator itself is best used on a larger screen since building the layout involves clicking and dragging across grid cells, but the CSS it outputs includes a responsive breakpoint that stacks every box into a single column on smaller viewports automatically.