consolelog.tools

CSS Grid Template Generator

Drag across the grid to draw named regions, and get a ready-to-use grid-template-areas layout — export CSS, SCSS, Tailwind, HTML, JSX, or a responsive mobile-stacked variant. Live editable preview with a shareable URL.

About this ToolHow it works, benefits & use cases

Build a layout the way you’d sketch it on paper: drag across the grid canvas to draw a named region, and the tool writes the matching grid-template-areas map for you. Starting on empty cells creates a new, auto-named area (header, main, sidebar, aside, footer, and so on); starting inside an existing area grows or reshapes it. The canvas is fully keyboard-accessible too — focus a cell, press Enter to anchor a corner, arrow to the opposite corner, and press Enter again to draw, with each action announced to screen readers. Add up to 12 columns and rows, size each track with fr, px, %, auto, or minmax(), and set linked or independent gaps. Rename or remove areas in the list, and a warning flags any area that isn’t a solid rectangle — because grid-template-areas requires it. Start from a preset layout, then export CSS, nested SCSS, Tailwind classes, Tailwind HTML, JSX, or a Responsive variant that restacks every area into one column on mobile. The whole layout lives in a shareable URL.

How to Use

  1. 1Drag across cells on the canvas to draw an area; drag inside an existing area to grow it (or use Enter/arrow keys to draw by keyboard).
  2. 2Add or remove columns and rows with the track steppers (up to 12 each) and type a size for each track — fr, px, %, auto, or minmax().
  3. 3Set the column and row gaps, linked together or independently via the link toggle.
  4. 4Rename areas inline or remove them in the Areas list; fix any area flagged as not-a-rectangle.
  5. 5Start from a layout preset if you want a head start.
  6. 6Choose an output format — CSS, SCSS, Tailwind, HTML, JSX, or Responsive — and copy, download, share, or pipe it.

Key Benefits

  • Draw named regions by dragging — the grid-template-areas map is written for you
  • Fully keyboard-accessible canvas with anchor-and-extend placement and screen-reader announcements
  • Auto-named areas (header, main, sidebar…) and inline rename / remove
  • Up to 12 tracks per axis, each sized with fr, px, %, auto, or minmax()
  • Rectangle validation warns when an area can’t be expressed as grid-template-areas
  • Responsive export adds a one-column mobile stack of every area
  • Six output formats plus presets and a shareable URL, all in-browser

Common Use Cases

  • Sketching a holy-grail or dashboard layout and getting the areas map instantly
  • Producing a readable named-area layout that teammates can scan at a glance
  • Generating a responsive grid that collapses to a single column on mobile
  • Exporting Tailwind grid classes or JSX for a component shell
  • Teaching how grid-template-areas, track sizing, and gaps fit together

Grid with 3 rows and 3 columns. Use the arrow keys to move between cells. Press Enter to anchor a corner, move to the opposite corner, and press Enter again to draw an area across that rectangle. Starting inside an existing area grows it. Press Escape to cancel.

Drag across cells to draw an area

Drag across cells to draw an area. Drag inside an existing area to grow it. Rename or remove areas in the list on the right.

Areas (0)

No areas yet — drag across the grid to draw your first one.

Columns (3)
Rows (3)

Start from a preset

Copy, download, share, or pipe to another tool

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

Draw it, name it, ship it

grid-template-areas describes a layout as a readable map — "header header" "sidebar main" — so children drop into named slots with one grid-area. Draw your regions, size each track (fr, px, %, auto, minmax()), then export CSS, SCSS, Tailwind, HTML, JSX, or the Responsive variant that restacks every area into one column on mobile.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Related tools