01Free tool

Bento grid generator

Lay out tiles for phone, tablet and desktop, check that the grid reads in the right order, and copy clean CSS Grid, Tailwind v4 or React. No sign-up: the link saves your layout.

Start from

Selected tile

Select a tile to rename it or make it the lead tile. Focus one with Tab, then use the arrow keys to move it and Shift + arrows to resize it.

Style

Gap16px

Row height160px

Corner radius20px

Entrance animationOff for people who prefer reduced motion

4 columns

Desktop · from 64rem · 4 col6 tiles

2×2Lead feature

1×1Speed

1×2Integrations

1×1Security

2×1Analytics

2×1Pricing

Reading order

PhoneReads in source order
TabletReads in source order
DesktopReads in source order

Source order

bento.html

<section class="bento" aria-label="Highlights">
  <article class="bento-tile bento-lead-feature bento-tile--accent">
    <h3>Lead feature</h3>
  </article>
  <article class="bento-tile bento-speed">
    <h3>Speed</h3>
  </article>
  <article class="bento-tile bento-integrations">
    <h3>Integrations</h3>
  </article>
  <article class="bento-tile bento-security">
    <h3>Security</h3>
  </article>
  <article class="bento-tile bento-analytics">
    <h3>Analytics</h3>
  </article>
  <article class="bento-tile bento-pricing">
    <h3>Pricing</h3>
  </article>
</section>

bento.css

/* Mobile first: the phone layout is the base, wider screens redraw the map. */
.bento {
  display: grid;
  gap: 16px;
  grid-auto-rows: minmax(160px, auto);
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-areas:
    "lead-feature"
    "speed"
    "integrations"
    "security"
    "analytics"
    "pricing";
}

.bento-tile {
  min-width: 0; /* lets long content shrink inside a grid track */
  padding: 24px;
  border: 1px solid #e7e5e4;
  border-radius: 20px;
  background: #ffffff;
}

.bento-tile--accent {
  border-color: #1c1917;
  background: #1c1917;
  color: #fafaf9;
}

.bento-lead-feature { grid-area: lead-feature; }
.bento-speed { grid-area: speed; }
.bento-integrations { grid-area: integrations; }
.bento-security { grid-area: security; }
.bento-analytics { grid-area: analytics; }
.bento-pricing { grid-area: pricing; }

/* Tablet: 2 columns */
@media (min-width: 40rem) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "lead-feature lead-feature"
      "lead-feature lead-feature"
      "speed        integrations"
      "security     integrations"
      "analytics    analytics"
      "pricing      pricing";
  }
}

/* Desktop: 4 columns */
@media (min-width: 64rem) {
  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "lead-feature lead-feature speed    integrations"
      "lead-feature lead-feature security integrations"
      "analytics    analytics    pricing  pricing";
  }
}

How to use the generator

Start from one of the layouts, or add tiles one by one. New tiles land at the bottom of every breakpoint.
Pick a breakpoint and set its column count. Drag a tile to move it and pull its corner to resize it. On a touch screen, drag by the grip in the tile's corner so the page can still scroll.
Without a mouse, Tab to a tile, then use the arrow keys to move it and Shift with the arrow keys to resize it. Delete removes it, and Ctrl or Cmd with Z undoes the last change.
Check the reading order panel, then copy the HTML and CSS, the Tailwind classes or the React component.

CSS Grid can put any tile anywhere, but the HTML keeps its own order, and that is the order people using a keyboard or a screen reader go through. When a big tile is moved to the top on desktop but stays last in the markup, a sighted reader starts with it and a screen reader user hears it at the end. WCAG 2.2 treats that as a failure of success criterion 1.3.2, Meaningful Sequence (opens in a new tab), and of 2.4.3, Focus Order (opens in a new tab) when the tiles are links or buttons.

The generator reads each layout the way a sighted reader would, row by row and left to right, and compares that with the source order. The numbered path on the canvas is the order the Tab key will follow. If it doubles back, the panel names the tiles involved and can reorder the source to match the layout you are looking at. Because one HTML order serves every breakpoint, fixing desktop can break the phone layout, so all three are checked at once.

What the code does

The HTML and CSS output gives every tile one grid-area name and redraws grid-template-areas at each breakpoint, so the CSS reads like a map of the layout.
The Tailwind output is mobile first and only adds a class where a breakpoint changes something. When a layout is exactly what CSS auto-placement would produce, it gets spans only and no start lines.
Tiles get min-width: 0, so long words and code can shrink inside their track instead of stretching the grid.
The optional entrance animation staggers in reading order and sits inside @media (prefers-reduced-motion: no-preference), so it never plays for people who have asked for less motion.

Questions

Is the bento grid generator free?: Yes. It runs entirely in your browser, there is no account, and the code it produces is yours to use in any project, commercial or not.
Where is my layout saved?: In the page address. Once you change something, the layout is encoded into the part of the URL after the # sign, which never reaches a server. Copy the link to keep it or share it.
Does the Tailwind output work with Tailwind CSS v3?: It targets Tailwind CSS v4. Most classes also work in v3, but v3 only ships row-start-1 to row-start-7 by default, and the animation snippet uses v4's @theme block. For v3, extend gridRowStart and move the keyframes into tailwind.config.
Why doesn't it use grid-auto-flow: dense?: Dense packing fills holes with whichever later item fits, so tiles can appear on screen in a different order from the HTML. Keyboard and screen reader users follow the HTML, so the generator places every tile explicitly and checks the result instead.
Can tiles have different layouts on phone, tablet and desktop?: Yes. Each breakpoint keeps its own column count and arrangement. The HTML order is shared, which is why the reading-order check runs on all three layouts.

Bento grid generator

Start from

Selected tile

Style

Reading order

Source order

How to use the generator

Why it checks reading order

What the code does

Questions

More on bento grids

Bento grid in CSS and Tailwind v4: responsive, accessible and in the right order

Bento grid design: how to build hierarchy without losing the reader