consolelog.tools

CSS Grid Generator

Drag across the grid to place items, size every track (fr / px / % / auto / minmax), and tune gaps — then export the container + item CSS, grid-template-areas, Tailwind classes, HTML, or JSX. Live editable preview with a shareable URL.

About this ToolHow it works, benefits & use cases

The CSS Grid Generator turns a layout you draw into production-ready code. Instead of guessing at grid-template values, you sketch the layout directly on an interactive canvas — drag across empty cells (or use the keyboard) to place items, size each column and row independently with fr, px, %, auto, or minmax(), and tune the row and column gaps with live sliders. The preview updates as you build, so what you see is exactly what your CSS will render. When the layout looks right, export it as line-based CSS, a grid-template-areas map, Tailwind utility classes, ready-to-paste HTML, or JSX. Every layout is captured in a shareable URL, so you can bookmark a design or hand it to a teammate without re-drawing it. Everything runs in your browser — no sign-up, no upload, and your markup never leaves your machine.

How to Use

  1. 1Set your track structure: use the Columns and Rows steppers to add or remove tracks, then type a size for each track (1fr, 200px, auto, minmax(0, 1fr), and so on).
  2. 2Place items by dragging across empty cells on the canvas, or with the keyboard — focus a cell, press Enter to anchor, arrow to another cell, and press Enter again to place.
  3. 3Adjust the row and column gaps with the sliders; keep them linked for an even gutter or unlink to set each axis separately.
  4. 4Select any placed item from the list to highlight it, or remove items you no longer need.
  5. 5Pick an output format (CSS, grid-template-areas, Tailwind, HTML, or JSX) and copy, download, or share the generated code.

Key Benefits

  • Draw layouts visually instead of trial-and-error editing of grid-template values
  • Size every track independently with fr, px, %, auto, or minmax()
  • Export to CSS, grid-template-areas, Tailwind classes, HTML, or JSX
  • Live preview that matches the generated code exactly
  • Fully keyboard-accessible canvas — place items without a mouse
  • Shareable URL captures the entire layout for bookmarking or handoff
  • Runs entirely in your browser — nothing is uploaded

Common Use Cases

  • Prototyping page layouts like holy-grail, dashboards, and sidebars
  • Generating grid-template-areas maps for named, readable layouts
  • Producing Tailwind grid utilities for component libraries
  • Teaching or learning how CSS Grid track sizing and spanning work
  • Handing a precise layout spec to another developer via a single link

Layout grid with 3 rows and 3 columns. Use the arrow keys to move between cells. Press Enter to anchor the start of an item, move to another cell, and press Enter again to place it. Press Escape to cancel. Existing items can be selected and removed from the placed items list below.

Drag across empty cells to place an item, or use the keyboard: focus a cell, press Enter to anchor, arrow to another cell, then Enter to place.

Columns (3)
Rows (3)

Placed items (0)

Drag across the grid on the left to create your first item.

Layout presets

Copy, download, share, or pipe to another tool

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 12px;
}

Draw your layout, get the code

Drag across the grid to spawn placed items — exactly like sketching a wireframe. Size each track independently (fr, px, %, auto, minmax()), then export line-based CSS, a grid-template-areas map, Tailwind classes, ready-to-paste HTML, or JSX.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Related tools