ToolAdda

Free · Browser-based · CSS Grid

Bento Grid Layout Generator

Create beautiful responsive Bento Grid layouts visually and generate clean HTML and CSS code instantly.

  • Visual builder
  • HTML & CSS export
  • Responsive breakpoints
  • Live preview
  • Nothing uploaded
▶ Open builder Box shadows

Bento Builder

🔒 Runs locally
1120px
Grid

Class names must be plain CSS identifiers. Invalid names fall back to the defaults.

Cards (0)

    Drag a card on the canvas to move it, drag its corner handle to resize. Arrow keys nudge the selected card, Shift+arrows resize.

    Canvas

    Both are editor aids — neither appears in the exported code.

    Responsive

    Generates real media queries at 1024px and 640px. Per-card spans live in the inspector.

    Presets
    Inspector

    Select a card on the canvas to edit it.

    Code
    0 chars

    Build a Bento Grid in Minutes

    1. Set the grid

    Choose columns, rows, gap and padding. Pick a preset or start from scratch.

    2. Add & arrange cards

    Drop tiles, drag to move them, and resize with the corner handle or arrow keys.

    3. Style each card

    Change content type, colors, borders, shadows, typography and responsive spans.

    4. Export code

    Copy or download clean HTML and CSS — fragment, full page or minified output.

    What is a Bento Grid?

    A Bento Grid is a layout made of rectangular cards of different sizes packed into a single grid — named after the compartments of a Japanese bento box. One tile might be large and square, the next narrow and tall, another a short wide strip. Because every card snaps to the same underlying tracks, the result looks lively without ever looking messy.

    The pattern became popular through product landing pages and hardware marketing sites, where a grid of uneven tiles can present a dozen features at a glance. Underneath, it is simply CSS Grid: a container with a fixed number of columns, and cards that each claim a rectangle of cells.

    That is exactly what this generator does. You arrange the rectangles visually, and it writes the grid-column and grid-row declarations for you.

    How to create a Bento Grid

    1. Choose the grid. Set columns and rows, then pick a gap and padding.
    2. Add cards. Press + Add card to drop a tile into the first free cell, or start from a preset.
    3. Resize and rearrange. Drag a card to move it, drag its corner handle to resize. Arrow keys nudge the selection and Shift+arrows resize it.
    4. Customize. Use the inspector for content, background, border, radius, shadow, typography and alignment.
    5. Set breakpoints. Choose tablet and mobile columns, and give individual cards their own responsive spans.
    6. Copy the code. Take the HTML and CSS, or download a complete page.

    Keyboard shortcuts

    • ↑ ↓ ← → — move the selected card
    • Shift + arrows — resize it
    • Ctrl/⌘ + Z — undo, add Shift to redo
    • Ctrl/⌘ + D — duplicate
    • Delete — remove the selected card
    • Esc — deselect

    Bento Grid with CSS Grid

    The container defines the tracks once:

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

    Then each card claims a rectangle of those tracks:

    .bento-card--1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

    grid-column: 1 / span 2 means “start at line 1 and cover two columns”. minmax(0, 1fr) stops long words from stretching a track, and grid-auto-rows gives every row a sensible minimum height while still letting tall content grow. Change the column count inside a media query and the whole layout re-flows.

    Common Bento layouts

    Every one of these is a preset in the builder — load it and adapt it.

    Hero + featuresA full-width headline across the top, then a row of equal feature tiles beneath it.
    DashboardA row of small stat tiles above one large chart panel and a narrow activity feed.
    PortfolioA tall intro tile beside a large image, with small project and contact tiles filling in.
    SaaS landing pageOne dominant tile for the headline feature, supported by mid-sized proof points.
    Product showcaseApple-style: generous padding, big radii, few words, one idea per tile.
    Developer toolsA directory grid where each tile is a utility, with icon tiles as visual punctuation.
    StatisticsNumbers as the hero — large stat values with small labels underneath.
    AsymmetricFive columns and deliberately uneven spans for an editorial feel.
    MinimalThree tones, no gradients, and space doing most of the work.

    Frequently asked questions

    What is a Bento Grid?

    A layout of rectangular cards of different sizes packed into one grid, named after the compartments of a Japanese bento box. Each card occupies a whole number of grid cells, so the result looks varied but stays perfectly aligned.

    What is a Bento Grid Generator?

    A visual builder for those layouts. You drag and resize cards on a canvas instead of writing grid-column and grid-row by hand, and the tool writes the HTML and CSS for you.

    How does CSS Grid create Bento layouts?

    The container uses display: grid with grid-template-columns to define the tracks. Each card claims a rectangle with grid-column and grid-row, using span to cover several tracks. Because every card snaps to the same tracks, different sizes still line up.

    Can I generate HTML and CSS?

    Yes. The code panel shows both for your current layout and updates as you edit. Copy either one, or download a complete HTML page with the CSS embedded.

    Is the generated CSS responsive?

    Yes. The generator writes real media queries at 1024px and 640px that change the column count and give every card a new span, rather than just shrinking the desktop layout.

    Can I customize card sizes?

    Yes. Drag the corner handle on a selected card, set the column and row span numerically in the inspector, or hold Shift and press the arrow keys.

    Can I change the number of columns?

    Yes, from 1 to 12 columns and rows. Cards that would fall outside the new grid are pulled back inside automatically.

    Can I create asymmetric layouts?

    Yes — that is the point of a Bento grid. Mix one and two column cards with different row spans, or load the Asymmetric preset as a starting point.

    Can I use the generated code commercially?

    Yes. The output is ordinary HTML and CSS that you own. No attribution, no licence.

    Does the generator work on mobile?

    The controls, presets, code panel and export all work on a phone. Dragging cards is a desktop pointer interaction, so on small screens use the numeric position and span controls in the inspector.

    Can I export the layout?

    Yes. Download the HTML on its own, the CSS on its own, or a complete single-file page you can open straight in a browser.

    Can I copy the CSS?

    Yes. Switch the code panel to the CSS tab and press Copy CSS. Copy all gives you the markup with the stylesheet inlined.

    Can I create Bento layouts for websites?

    Yes. The output is plain CSS Grid with your own class names, so it drops into any site, framework or CMS that accepts HTML and CSS.

    What is the difference between a Bento Grid and CSS Grid?

    CSS Grid is the browser technology. A Bento Grid is a design pattern built with it — a deliberately uneven arrangement of cards. Every Bento grid is a CSS Grid, but plenty of CSS Grids are not Bento layouts.

    Are undo and redo supported?

    Yes. Every meaningful change is recorded. Press Ctrl/⌘+Z to undo and add Shift to redo, or use the toolbar buttons.

    What are the grid overlay and card labels for?

    They are editing aids. The overlay draws cell boundaries with numbers so you can see the tracks; labels name each card. Neither appears in the exported HTML or CSS.

    Is my layout sent to a server?

    No. Everything runs in your browser. There is no backend, no account and no upload.

    Can I add my own CSS to a card?

    Yes. The Advanced CSS box accepts plain property: value pairs such as transform or letter-spacing. Declarations are parsed and validated, and anything containing braces, at-rules or script-bearing URLs is discarded.