CSS Grid Generator

Overview

Build a CSS Grid layout on a live canvas. Add columns and rows with any track size (fr, px, %, rem, auto, min-content, max-content, minmax or repeat), then place items by line number or by painting named areas. Add breakpoints to change the layout per screen size, preview it at any width, and copy plain CSS or Tailwind classes that always match. It all runs in your browser and works offline.

Prototype page layouts fastSketch dashboards, holy-grail pages, sidebars and card grids, then copy the CSS or Tailwind into your project.
Author responsive gridsStart from a base grid and set exactly how columns and areas reflow on mobile, tablet and desktop.
Learn CSS Grid by seeing itSee how each change maps to grid-template-columns, grid-area and media queries.
Generate grid-template-areasPaint named regions and get aligned grid-template-areas plus grid-area rules, ready to paste.

Key features

Live canvas that renders your real grid
fr, px, %, rem, auto, minmax, repeat and more
Place and span items, including full-width 1 / -1
Paint named grid-template-areas
Breakpoints with real @media queries and Tailwind prefixes
Preview at mobile, tablet, desktop or any width
Copy the CSS, the HTML or Tailwind classes
Starter layouts: holy grail, dashboard, sidebar, cards and more
Works offline, in light and dark mode

Set

Developer Tools 07

Neighbours

01 SQLite Database Viewer & Editor 02 Favicon Generator 03 Flexbox Generator 04 HTML Editor & Live Preview 05 Regex Tester & Live Preview 06 Webfont Converter

Specification

Command: developer.css_grid_generator
Set: Developer
Input: text
Output: —
Max file: no limit
Batch: single file

Runtime

Engine: CodeMirror 6 · native
Threads: single
Isolated: —
WebGPU: —
Memory: —

Transport 0 B

Your file is opened, worked on and saved inside this tab. This tool has no upload step, so your file has nowhere else to go.

Keys

Search: ⌘K
Panels: ⌘1 · ⌘2
Full width: F
All keys: ⌘/

How it works

Shape the grid

Add columns and rows and size each track with fr, px, %, minmax or repeat. The canvas shows your real grid as you go.

Place your content

Add items and place them by grid line or by painting named areas. Span cells, go full width and set alignment per item.

Make it responsive

Pick a breakpoint and change the columns, gaps, areas or placement for that screen size. The @media queries are written for you.

Copy the code

Switch between CSS and Tailwind, preview at any width, and copy the result.

Frequently asked

Does everything run in my browser?

Yes. The builder, the preview and the code generation all run in your browser. Nothing is uploaded and nothing is tracked.

Can it generate grid-template-areas?

Yes. Paint named areas across the grid, and items in an area get a grid-area rule. The grid-template-areas value is written as neat, aligned rows.

Does it support responsive layouts?

Yes. Set a base layout, then change columns, rows, gaps, areas or placement per breakpoint. The CSS gets real min-width media queries, and Tailwind gets prefixes like md: and lg:.

Can I get Tailwind classes instead of CSS?

Yes. Switch the output to Tailwind and copy the classes on the HTML. Both outputs come from the same model, so they always match.

Is the preview accurate?

Yes. The canvas renders a real CSS Grid, and the preview is a separate sandboxed render of the exact code you copy.

Do I need to know CSS Grid already?

No. The visual controls and starter layouts get you going, and reading the generated CSS is a good way to learn what each property does.

Keys

Search: ⌘K
Panels: ⌘1 · ⌘2
Full width: F
All keys: ⌘/