Bento grid
Saved palettes
What is a bento grid layout?
A bento grid is an asymmetric CSS grid — a mix of large "hero" tiles and smaller supporting tiles packed edge to edge, named after the compartmentalized Japanese lunchbox it resembles. It's become the go-to layout for feature sections, dashboards, and portfolios because varied tile sizes create instant visual hierarchy without a single line of custom CSS math. This bento grid generator lets you build one by dragging directly on a live preview, then copy the result as CSS, Tailwind, or plain HTML — whichever your project already speaks.
How to build your grid
- Set Columns, Rows, Gap, and Radius in the Grid drawer to size the canvas you're working with.
- Drag across cells on the stage to merge them into a tile — release to commit the rectangle.
- Tap a tile (or its row in the Cells drawer) to name it, or delete it to release its cells.
- Flip Tablet to 2-col if you want two columns at tablet widths instead of a single stacked column.
- Open a curated layout from Presets, or copy the finished grid with Copy CSS, Copy Tailwind, or Copy HTML.
Design tips for a better bento grid
Give exactly one tile the largest span in the grid — a bento layout with two or three "biggest" tiles competing for attention reads as cluttered rather than organized. Keep gap and radius consistent across a whole layout; the mismatched-corner look is the fastest way to make a bento grid feel unfinished. Name every tile you plan to style directly (hero, pricing, testimonial) so the exported css grid template areas generator output reads like documentation, not a1/b2 placeholders, once you paste it into your own project.
Where to use a bento grid
Bento grids show up constantly on SaaS marketing pages (a features section built from mixed tile sizes), product dashboards (a big chart tile beside smaller stat tiles), portfolios (a featured project tile among smaller thumbnails), and pricing tables (a highlighted plan flanked by its neighbors). Export bento grid tailwind classes straight into an existing Tailwind project, or copy bento grid css for a plain stylesheet — either way the layout collapses to a clean single column automatically once the viewport drops below tablet width, so there's no separate mobile design to build.
Frequently asked questions
What is a bento grid layout?
A bento grid is an asymmetric CSS grid layout named after Japanese bento boxes — a mix of large and small rectangular tiles packed edge to edge, instead of a uniform row-and-column table. It's become a popular way to showcase features, dashboards, and portfolios because the varied tile sizes create visual hierarchy: your most important content gets the biggest box.
How do I generate CSS grid-template-areas?
Drag across cells on the stage to merge them into a tile, then open a tile's row in the Cells drawer and give it a name. Click Copy CSS and this bento grid generator emits a complete grid-template-areas declaration — one quoted row per grid row, named areas matching your tiles — plus the grid-template-columns, rows, and gap it depends on.
Can I export a bento grid as Tailwind classes?
Yes — click Copy Tailwind for real col-span, row-span, col-start, and row-start utility classes per tile, plus grid-cols and grid-rows on the container. Most bento grid generators only output plain CSS; this one treats Tailwind as a first-class export so a Tailwind project never has to hand-translate grid-template-areas back into utility classes.
How do I merge cells into a spanning tile?
Press down on a cell and drag to any other cell — releasing commits a rectangular tile spanning everything between your start and end point. Dragging across cells that already belong to another tile replaces that tile outright (last-write-wins), so you never end up with overlapping or orphaned cells. Only rectangles are supported; CSS grid areas can't express an L-shape.
How does a bento grid collapse on mobile?
By default every tile stacks full-width in a single column, in source order, below 768px — a bento layout with ten tiles becomes ten readable rows on a phone, no configuration needed. Flip the Tablet toggle to 2-col in the Cells drawer if you'd rather show two columns on tablet-sized screens before the full grid takes over at desktop widths.
How do I name grid areas semantically?
Select a tile (tap it on stage, or use its row in the Cells drawer) and type a name — "hero", "pricing-table", whatever describes its content. That name becomes the literal grid-area value in your exported CSS and the class name in the HTML skeleton. Leave a tile unnamed and it gets an automatic a1/b2-style label from its position instead.
What's the difference between grid-template-areas and grid spans?
grid-template-areas names each region of a template and is what this generator's Copy CSS output uses — readable, and the direct answer to "css grid template areas generator" searches. Grid spans (col-span, row-span) place an item by counting tracks instead of naming a region, which is how the Copy Tailwind output works. Both describe the exact same layout; pick whichever fits your existing CSS or Tailwind codebase.