cssgridgenerator All tools
App UI

Bento Grid Layout Generator

Mixed-size tiles in a tight, deliberate arrangement: one hero tile, a tall one, a wide one and small ones around them.

Open in
1204px

Drag across the grid to draw an area. Arrow keys nudge, Shift + arrows resize.

space to pan · ⌘scroll to zoom
11fr21fr31fr41fr5
1minmax(160px, auto)2minmax(160px, auto)3minmax(160px, auto)4
feature1 / 1 / 3 / 3
tile-a1 / 3 / 2 / 4
tall1 / 4 / 3 / 5
tile-b2 / 3 / 3 / 4
wide3 / 1 / 4 / 4
tile-c3 / 4 / 4 / 5

Reading order Matches the DOM here. It does not at Tablet — move the width ruler there to see which elements swap.

Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.

.bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(140px, auto) minmax(140px, auto) minmax(140px, auto) minmax(120px, auto) minmax(120px, auto);
  gap: 12px;
  grid-template-areas:
    "feature feature"
    "tile-a  tall"
    "tile-b  tall"
    "wide    wide"
    "tile-c  tile-c";
}

.bento > .feature { grid-area: feature; }
.bento > .tile-a { grid-area: tile-a; }
.bento > .tall { grid-area: tall; }
.bento > .tile-b { grid-area: tile-b; }
.bento > .wide { grid-area: wide; }
.bento > .tile-c { grid-area: tile-c; }

@media (min-width: 640px) {
  .bento {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: minmax(150px, auto) minmax(150px, auto) minmax(140px, auto) minmax(140px, auto);
    gap: 14px;
    grid-template-areas:
      "feature feature tall"
      "feature feature tall"
      "tile-a  tile-b  tile-c"
      "wide    wide    wide";
  }
}

@media (min-width: 1024px) {
  .bento {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: minmax(160px, auto) minmax(160px, auto) minmax(160px, auto);
    gap: 16px;
    grid-template-areas:
      "feature feature tile-a tall"
      "feature feature tile-b tall"
      "wide    wide    wide   tile-c";
  }
}

How this layout works

A bento grid, named after the compartments of a bento box and made familiar by product launch pages, is an ordinary CSS grid with deliberately uneven spans. The layout here uses four equal columns and three fixed-height rows; the tiles span 2×2, 1×2, 3×1 and 1×1 cells.

The discipline is in the tile sizes. Keep to a small set, such as one large, one tall, one wide and a few small, and repeat them. When every tile is its own size the grid stops reading as a system and looks accidental.

Fixed row heights do the rest. minmax(140px, auto) on every row keeps the tiles in proportion instead of letting each row collapse to its content, while still letting a row grow if a tile has more text than fits.

On narrow screens the same tiles reflow into fewer columns: three on tablet, two on phones. The feature tile stays first in the HTML so it is also first for keyboard and screen-reader users. That is safer than grid-auto-flow: dense, which fills gaps by moving tiles away from their source order.

Every property used here is listed in the CSS Grid cheat sheet, with the reason to reach for it.

Frequently asked questions

What is a bento grid?
A bento grid is a layout of tiles in a few deliberate sizes, packed tightly like the compartments of a bento box. In CSS it is an ordinary grid where some items span more rows or columns than others.
How do I make a bento grid in CSS?
Give the container equal columns and fixed-height rows, such as grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(160px, auto), then make chosen tiles span with grid-column: span 2 or a named area. The editor above writes it for every breakpoint.
What makes a bento grid look right?
Restraint in the tile sizes. It falls apart when every tile is a different size, so pick one large, one tall, one wide and a few small, then repeat. Set a fixed row height so tiles keep their proportions.
How do I make a bento grid responsive?
Redraw it with fewer columns at each breakpoint: four on desktop, three on tablet, two on phones, keeping the same tiles. Keep the most important tile first in the HTML so the reading order matches what people see.
Can I build a bento grid with Tailwind?
Yes: grid grid-cols-2 md:grid-cols-4 on the container and col-span-2 row-span-2 on the large tile. The Tailwind grid generator writes the classes for each breakpoint.
How do I center a grid in CSS?
Use justify-content: center on the grid container to centre the whole grid inside it, and margin-inline: auto with a max-width to centre the container in the page. These are different jobs: the first moves the tracks within the container, the second moves the container itself.
How do I center items inside a CSS grid?
Set place-items: center on the container. That is shorthand for align-items plus justify-items, and it centres every item inside its own cell on both axes. For a single item, use place-self: center on that item instead.
How do I make a CSS grid responsive?
Use grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) and it reflows at every width with no media queries at all. Add breakpoints only when the exact column count matters, or when the layout has to change shape rather than just wrap.
When should I use CSS Grid instead of Flexbox?
Use Grid when things must line up in two directions at once, and Flexbox when content flows along one axis. A page skeleton or dashboard is Grid; a navbar or row of buttons is Flexbox. They nest: Grid for the page, Flexbox inside the cells. CSS Grid vs Flexbox compares them side by side.

How to use it

  1. Open the pattern

    The bento grid loads into the editor already responsive, with every breakpoint set up.

  2. Change the tracks

    Edit the column and row sizes in the Tracks panel. Anything valid in a track list works.

  3. Redraw at another width

    Move the ruler past a breakpoint marker and rearrange. Only the placement changes.

  4. Copy the code

    Take CSS, HTML, Tailwind or a shadcn component. The media queries are already written.

More in App UI

Elsewhere in the library

Browse all 46 layout patterns →

Related tools

Every generator here writes CSS you can paste straight into a project.