Skip to content

CSS Grid Generator

Visually build a CSS grid — drag tracks, gaps and named areas — with a live preview, then copy the exact CSS and HTML.

  • 🎨 Design Tool
  • ✓ Free
  • ✓ No sign-up
  • ✓ Private — runs in your browser
  • ✓ Any device
Columns

1 – 12 tracks

Rows

1 – 12 tracks

Column sizes
Row sizes
Gaps
Alignment

Only non-default values are written to the CSS. justify-content / align-content only show movement when the tracks don't fill the container (e.g. fixed px sizes).

Areas — pick one, then click or drag across the matrix to paint

Tip: paint a top row as header, the middle row as nav / main / aside, and the bottom as footer for the classic “holy grail” layout.

Live preview
Presets

🔒 100% in your browser — nothing is uploaded. Drag to paint areas, watch the grid morph live, then copy paste-ready CSS & HTML. Your layout is auto-saved on this device.

Why you’ll love CSS Grid Generator

Instant & freeNo signup, no paywall, no limits — CSS Grid Generator works the moment the page loads.
Completely privateEverything runs in your browser. Nothing you enter is ever uploaded or stored on a server.
Works on any deviceFully responsive and touch-friendly — use it on your phone, tablet or desktop.
Copy & exportGrab the CSS, SVG or a PNG in one click and drop it into your project.

How to use it

  1. 01

    Open it

    No download and no login — the tool is ready right at the top of this page.

  2. 02

    Use it

    Enter your details or start interacting. Everything updates live as you go.

  3. 03

    Get your result

    Copy, download or share your result in a single tap. That’s it.

About CSS Grid Generator

This CSS grid generator lets you design a real grid layout visually and copy exact, paste-ready code. Step up to 12 columns and 12 rows, then size each track individually — fr, px, %, auto, min-content, max-content or a full minmax() with separate min and max units. Column and row gaps (0–60px, linkable), plus justify-items, align-items, justify-content and align-content are all controlled by eye against a live preview that morphs as you change values.

The Named areas mode is where it saves the most typing: pick an area name — header, nav, main, aside, footer or your own — and drag across the paint matrix to place it. The tool validates that every area forms a solid rectangle, exactly as the CSS specification requires, and flags stray cells before they become an invalid stylesheet. It then emits a neatly column-aligned grid-template-areas block, one .name { grid-area: name } rule per region, and the matching HTML skeleton.

Four presets (Holy Grail, card gallery, sidebar + main, dashboard) give you a working starting point, and only non-default properties are written to the output, so the CSS stays minimal. Everything runs in your browser — nothing is uploaded — and your layout auto-saves on your device so you can come back to it later.

Popular uses

  • ✦ Scaffolding a page shell (header, sidebar, main, footer) without hand-writing grid-template-areas
  • ✦ Learning CSS grid by watching how fr, minmax() and gaps interact in real time
  • ✦ Prototyping dashboard layouts before committing them to component code
  • ✦ Translating a designer's mockup into exact track definitions and clean starter CSS
  • ✦ Producing paste-ready CSS + HTML for CodePen demos and quick client prototypes

Frequently asked questions

What is the difference between the Tracks mode and the Named areas mode?
Tracks mode generates grid-template-columns and grid-template-rows only, and your items auto-place into the cells — ideal for uniform layouts like card galleries. Named areas mode additionally paints regions onto the grid and generates grid-template-areas plus a grid-area rule for each child, which is the clearer choice for page scaffolds like header/sidebar/main/footer where each element has a fixed home.
Why does the tool say my area "isn't a solid rectangle"?
The CSS Grid specification requires every named area in grid-template-areas to form a single, completely filled rectangle. An L-shaped area or two disconnected cells sharing one name makes the whole declaration invalid, and the browser silently ignores it. The generator checks this as you paint and blocks the broken output until you fill the gaps or erase the stray cells.
When should I use fr instead of % or minmax()?
The fr unit shares out the space left over after gaps and fixed tracks, so "1fr 2fr" can never overflow its container. Percentages are computed against the container width and ignore gaps, which is why a 50% + 50% grid with a gap overflows. minmax() combines both worlds: minmax(200px, 1fr) gives you a sidebar that never collapses below 200px, and minmax(0, 1fr) stops long content from blowing a column open.
Why don't justify-content and align-content appear to do anything?
Those two properties distribute leftover space inside the grid container — but if your tracks use fr units, the grid always fills the container and there is no leftover space to distribute. Switch some tracks to fixed px or auto sizes and you'll see space-between, center and the other values start moving the tracks in the preview.
Can I make the generated grid responsive?
The output describes one layout, so the standard approach is to build each breakpoint's version here and wrap the alternatives in your own @media rules. Conveniently, only the grid container's declaration needs to change per breakpoint — the per-child grid-area rules and the HTML stay identical — so re-paint the areas for mobile, copy the CSS, and swap just the grid-template-* lines inside your media query.
Is CSS Grid Generator free to use?
CSS Grid Generator is 100% free — no signup, no watermarks and no usage limits. It’s one of 200+ free tools we build and give away.
Can I use the output commercially?
Yes — copy the code or download the image and use it freely in personal and commercial projects.

More design & visual tools

All design & visual tools
Favicon GeneratorMake a favicon from an emoji, letter or upload — download all the sizes. Glassmorphism GeneratorCraft frosted-glass UI cards and copy the exact CSS. Tweak blur, opacity, tint. Gradient Text GeneratorCreate eye-catching gradient text and copy the CSS. Animated options too.

People also use

Free Resume Builder — No Signup, Print to PDFFree resume builder with live preview — make an ATS-friendly resume and save it... Income Tax Calculator (Canada)Estimate your federal + provincial income tax and take-home pay in Canada. Image Resizer & CompressorResize, convert and compress images to a target size (e.g. under 100 KB) — JPG/P...
Browse all 317 free tools

We built this. We can build yours.

CSS Grid Generator is one of our free tools. Need a website, app, AI agent or automation? Fixed price — and you own the code.

Start a projectOur services