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.
1 – 12 tracks
1 – 12 tracks
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).
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.
🔒 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 & free
No signup, no paywall, no limits — CSS Grid Generator works the moment the page loads.
Completely private
Everything runs in your browser. Nothing you enter is ever uploaded or stored on a server.
Works on any device
Fully responsive and touch-friendly — use it on your phone, tablet or desktop.
Copy & export
Grab the CSS, SVG or a PNG in one click and drop it into your project.
How to use it
Open it
No download and no login — the tool is ready right at the top of this page.
Use it
Enter your details or start interacting. Everything updates live as you go.
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
Frequently asked questions
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.
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.
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.
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.
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.
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.
Yes — copy the code or download the image and use it freely in personal and commercial projects.
More Design & Visual Tools
From our collection of 317 free tools.
People also use
We built this. We can build yours.
CSS Grid Generator is one of 200+ free tools from Workaholic Developers — a software & AI studio. Need a website, app, AI agent or automation? Let’s talk.
🇮🇳 Built by Workaholic Developers
We built this little toy in days. Imagine what we’ll build for you.
AI agents, web apps, automation, custom tools — designed and engineered fast, on whatever tech fits the job. If you can describe it, we can build it.