Bento Grid Generator

Q: How do I make a bento grid in CSS?

Use a grid container, for example display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;, then give big tiles a span such as grid-column: span 2; grid-row: span 2;. Draw your layout here and the tool writes all of this, plus the rules for tablets and phones.

Q: How do I make a bento grid with Tailwind CSS?

Use grid with responsive column counts such as grid-cols-1 sm:grid-cols-2 lg:grid-cols-4, a row height like auto-rows-[minmax(180px,auto)], and spans on the tiles such as row-span-2 sm:col-span-2. The Tailwind tab gives you the exact classes for your layout.

Draw a bento layout tile by tile, see how it reflows on tablets and phones, and copy CSS grid code with named areas — or Tailwind classes and a React component.

Runs in your browser Free · no sign-up Works on any device

Hero2×2

Stats1×1

Profile1×2

Music1×1

Map1×1

Gallery2×1

Contact1×1

Drag across empty cells to draw a tile. Drag a tile to move it, or its corner to resize it. With the keyboard, Tab to a tile, then use the arrow keys (Shift to resize, Delete to remove).

Start from

Grid

Columns

Rows

Gappx

Row height (minimum)px

Corner radiuspx

Smaller screens

Tablet columns

Phone columns

Fill holes on smaller screensTiles keep their reading order. That leaves 1 empty cell on tablets.

Code

Desktop placement

Style the tilesBackground, rounded corners and padding.

Container class

Phones first, then tablets (640 px and up) and desktops (1024 px and up). Pair it with the HTML tab.

.bento {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-auto-rows: minmax(180px, auto);
  gap: 16px;
}

.bento > * {
  min-width: 0;
  padding: 24px;
  border-radius: 24px;
  background: #f1f5f9;
}

.bento > .hero {
  grid-row: span 2;
}

.bento > .profile {
  grid-row: span 2;
}

/* Tablets */
@media (min-width: 640px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento > .hero {
    grid-column: span 2;
  }

  .bento > .gallery {
    grid-column: span 2;
  }
}

/* Desktops: the layout as drawn */
@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "hero    hero    stats   profile"
      "hero    hero    music   profile"
      "map     gallery gallery contact";
  }

  .bento > .hero {
    grid-area: hero;
  }

  .bento > .stats {
    grid-area: stats;
  }

  .bento > .profile {
    grid-area: profile;
  }

  .bento > .music {
    grid-area: music;
  }

  .bento > .map {
    grid-area: map;
  }

  .bento > .gallery {
    grid-area: gallery;
  }

  .bento > .contact {
    grid-area: contact;
  }
}

At a glance

Draw tiles by dragging across a grid of up to 12 × 12 cells; drag a tile to move it or its corner to resize it. Tiles can never overlap.
Every layout is responsive: desktops get the grid as drawn, tablets and phones get fewer columns (you choose how many) with each tile shrunk to fit.
Tiles stay in reading order — left to right, top to bottom — in the HTML, so keyboards and screen readers follow the layout. Optional dense packing fills holes on small screens.
CSS uses grid-template-areas with names from your tile labels, or line numbers if you prefer, inside mobile-first media queries at 640 px and 1024 px.
Also writes Tailwind CSS v4 classes (checked against Tailwind’s own compiler) and a React component.
Works with the mouse, touch and the keyboard, with undo. Five starting layouts: classic bento, product features, portfolio, dashboard and mosaic.

Step by step

How to make a bento grid

1
Start from a layout
Pick Classic bento, Product features, Portfolio, Dashboard or Mosaic, or press Clear for an empty grid.
2
Set the grid
Choose the number of columns and rows, the gap, the minimum row height and the corner radius.
3
Draw your tiles
Drag across empty cells to add a tile. Drag tiles to move them and their corner to resize them. Select a tile to rename it — the name becomes its class.
4
Check smaller screens
Open Tablet and Phone. Change the number of columns there, or switch on Fill holes on smaller screens if gaps appear.
5
Copy the code
Copy CSS and HTML, or Tailwind, or the React component.

Features

Everything you need, nothing you don’t

Draw, don’t type

Drag across empty cells to make a tile, drag tiles around and pull their corners. Red means it would overlap, so you always end with a valid grid.

See every screen size

Switch between Desktop, Tablet and Phone to see the real layout at each size, with numbers showing the reading order.

Readable CSS

grid-template-areas draws the layout right in your stylesheet, with tile names lined up in columns — easy to change by hand later.

Accessible by default

The HTML follows the visual order, tiles can be edited from the keyboard, and the tool tells you when dense packing would change the order on screen.

Tailwind and React

Responsive grid-cols, col-span and row-start classes for each tile, or a ready BentoGrid component.

Saved as you go

Your layout is kept in this browser, so you can come back to it. Nothing is uploaded.

What a bento grid is

A bento grid arranges content in tiles of different sizes inside one rectangle, like the compartments of a Japanese bento lunch box. A large tile carries the main message and smaller ones hold details, stats or images. Apple’s product pages made the style popular, and it now appears on portfolios, landing pages and dashboards.

CSS Grid is made for it: one container with display: grid, columns of equal width, and each tile told how many columns and rows to span.

How the generated CSS works

grid-auto-rows: minmax(…, auto) gives every row a minimum height but lets it grow when a tile has more content, so text is never cut off.

Screen	Columns	How tiles are placed
Phone (under 640 px)	your phone setting, usually 1	one after another in reading order; tall tiles keep their height
Tablet (640–1023 px)	your tablet setting, usually 2	spans shrunk to fit, in reading order
Desktop (1024 px and up)	as drawn	exactly where you drew them, with `grid-template-areas` or line numbers

Bento layouts that work for everyone

Keep the HTML in the order people should read it. This tool writes tiles left to right, top to bottom, exactly as you see them on desktop.
grid-auto-flow: dense fills holes by moving later tiles up. That can make the order on screen differ from the order a keyboard or screen reader follows — fine for pictures, not for links and buttons.
Put the most important content in the biggest tile; it is also the first tile on phones.
Give tiles enough contrast with the page background, and let text wrap instead of fixing tile heights.

FAQ

Frequently asked questions

How do I make a bento grid in CSS?

Use a grid container, for example display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;, then give big tiles a span such as grid-column: span 2; grid-row: span 2;. Draw your layout here and the tool writes all of this, plus the rules for tablets and phones.

What is grid-template-areas?

A CSS property that lets you draw the layout in text: each quoted string is a row and each word is a cell, so "hero hero stats" puts the hero tile across two columns. A dot marks an empty cell. Each tile then gets grid-area: hero;.

How do I make a bento grid with Tailwind CSS?

Use grid with responsive column counts such as grid-cols-1 sm:grid-cols-2 lg:grid-cols-4, a row height like auto-rows-[minmax(180px,auto)], and spans on the tiles such as row-span-2 sm:col-span-2. The Tailwind tab gives you the exact classes for your layout.

How does the layout change on mobile?

On phones the tiles stack in reading order in the number of columns you choose (one by default). On tablets, wide tiles shrink to fit the tablet columns. Open the Phone and Tablet views to see it before you copy the code.

Why are there holes in my tablet layout?

In reading order, a wide tile sometimes cannot fit next to the tile before it, so it starts a new row and leaves a gap. Change the tile sizes or the tablet columns, or switch on Fill holes on smaller screens, which lets later tiles move up into the gaps.

Can I edit the grid with a keyboard?

Yes. Press Tab to reach a tile, then use the arrow keys to move it, Shift with the arrow keys to resize it, and Delete to remove it. Add tile puts a new tile in the first free cell.

Is my layout saved?

Yes, in this browser’s local storage, so it is still there when you come back. Nothing is uploaded.

Keep going

New

CSS Glassmorphism Generator

Free glassmorphism generator: design frosted glass with blur, tint, border and grain, check text contrast live, and copy CSS, Tailwind or React code.

CSS ToolsOpen

New

Scroll Animation Generator

Free scroll animation generator: fade, slide, zoom and reveal effects with CSS scroll-driven animations, parallax and progress bars, plus a Firefox fallback.

CSS ToolsOpen

New

CSS to Tailwind Converter

Convert CSS to Tailwind classes online: hover, media queries, dark mode and gradients become variants, colours match the palette. Tailwind v4 and v3, free.

Developer ToolsOpen

New

Responsive Design Tester

Test a website on phone, tablet, laptop and desktop screen sizes side by side. Works with localhost and pasted HTML; shows Tailwind and Bootstrap breakpoints.

Developer ToolsOpen

New

CSS Neumorphism Generator

Free neumorphism generator: soft UI box-shadows from any colour and light angle, with contrast checks, pressed states, Tailwind classes and a UI kit.

CSS ToolsOpen

Popular

Image Compressor

Compress JPG, PNG, WebP and AVIF images online for free. Shrink photos by up to 90% or hit an exact KB target — right in your browser, with no upload.

Image ToolsOpen

Browse every tool

Last updated 14 October 2026Report a problem or suggest a feature

At a glance

How to make a bento grid

Start from a layout

Set the grid

Draw your tiles

Check smaller screens

Copy the code

Everything you need, nothing you don’t

Draw, don’t type

See every screen size

Readable CSS

Accessible by default

Tailwind and React

Saved as you go

What a bento grid is

How the generated CSS works

Bento layouts that work for everyone

Frequently asked questions

How do I make a bento grid in CSS?

What is grid-template-areas?

How do I make a bento grid with Tailwind CSS?

How does the layout change on mobile?

Why are there holes in my tablet layout?

Can I edit the grid with a keyboard?

Is my layout saved?

Related tools

CSS Glassmorphism Generator

Scroll Animation Generator

CSS to Tailwind Converter

Responsive Design Tester

CSS Neumorphism Generator

Image Compressor