CSS grid generators compared
Six free CSS grid generators, each opened in a browser and used: tracks set, areas drawn, code exported. The table records what each one actually did, not what its homepage says.
Disclosure: this site makes one of the six. It is listed last, and its limits are in the table too.
At a glance
| Tool | Track sizes | grid-template-areas | Breakpoints | Output | Presets | Export to | Shareable URL | Open source |
|---|---|---|---|---|---|---|---|---|
| Layoutit Grid Leniolabs | fr, px, %, em, auto, min/max-content, minmax(); repeat() optional | Yes | No | HTML, CSS | None seen | CodePen, CodeSandbox, StackBlitz | No (kept in the browser) | Yes, MIT |
| cssgridgenerator.io Kristjan Retter | Column and row count only; always repeat(n, 1fr) | No | No | HTML, CSS | No | No | No | No public repo found |
| CSS Grid Generator (Netlify) Sarah Drasner | Free text per track, e.g. minmax(), %, auto | No, line numbers | No | CSS, HTML | No | No | No | Yes, MIT |
| CSS Portal CSS Portal | fr, px, %, vh/vw per track | No, line numbers | No | HTML, CSS | 12 (empty grids, websites, galleries, columns) | No | No | No public repo found |
| AngryTools CSS Grid AngryTools | Free text, incl. repeat() and minmax() | Yes, in its "Grid Labels" output style | No | HTML, CSS (three styles) | 5 (page layout, pricing, collage…) | No | Yes, share link | No public repo found |
| cssgridgenerator.net (this site) This site | Any valid track: fr, px, %, auto, min-content, minmax(), repeat() | Yes, falls back to line numbers when areas overlap | Yes, a layout per breakpoint with @media output | CSS, HTML, Tailwind, shadcn/ui, React, Vue, Svelte | 46 layout patterns | CodePen, CodeSandbox, StackBlitz | Yes, layout lives in the URL | No public repo |
How they were tested
Each tool was loaded in Chromium on 26 September 2026. In each one we set custom tracks, drew or
placed an item, added a gap, opened every output panel and looked for export and share
buttons. "Breakpoints" means the tool itself lets you lay out a different grid per width
and writes the @media queries; typing a media query into a text box does not
count. Where a claim could not be confirmed, such as a repository that may exist but could
not be found, the table says so.
Layoutit Grid
The most capable of the single-layout tools. Per-track units including
minmax(), named areas drawn straight onto the canvas, separate row and column
gaps, and one-click export to CodePen, CodeSandbox or StackBlitz. It is open source under
MIT. What it does not do is breakpoints: you get one grid, and the only
@media in its output is an optional block for old Internet Explorer. The
"Get Shareable Link" button was disabled on the live site.
Pick it for one precise grid you want to take into a sandbox.
cssgridgenerator.io
The simplest of the six. Set a column count, a row count and one gap in pixels, click cells
to add items and drag to resize them. Every track is 1fr, so there are no
fixed-width sidebars or minmax(), and items are placed by line number rather
than named areas. It is not the same project as Sarah Drasner's generator, despite the
similar name. Pick it for a quick equal grid in a few seconds.
CSS Grid Generator by Sarah Drasner
The original, and still the link many tutorials share. It now lives at
cssgrid-generator.netlify.app; its GitHub README still points to an older .netlify.com
address that no longer loads. Track sizes are free text, so any valid value works, and
there are separate row and column gaps. Output uses grid-area line numbers
rather than named areas, and there are no presets, export or breakpoints. MIT licensed.
Pick it for a lightweight editor with free-form track sizes.
CSS Portal
The one with presets: empty grids from 3×3 to 12×12, four website layouts, two galleries and two- and three-column starters. Tracks take fr, px, % or viewport units. The grid defaults to 12 × 12 and goes up to 24, output places items by line number, and there is no export or shareable state. Pick it for a pre-made website layout to adjust.
AngryTools CSS Grid
Free-text tracks with repeat() and minmax(), five presets, a
share link that stores the layout in the URL, and three output styles, one of which writes
grid-template-areas. The tutorial text on the page discusses media queries,
but the generator's output has none. Pick it for a shareable layout with a
choice of CSS styles.
cssgridgenerator.net (this site)
Built around the gap the others leave: layouts that change shape between breakpoints. You draw the grid at each width and the CSS arrives with the media queries written, repeating only what changes. It outputs CSS, HTML, Tailwind, shadcn/ui, React, Vue and Svelte, starts from any of 46 layout patterns, warns when a breakpoint reorders content away from the HTML, and keeps the layout in the URL. Limits: up to 16 tracks per axis, no legacy IE output, and no public source repository. Pick it for responsive layouts or framework output. Try the CSS grid generator, or paste existing CSS into the CSS Grid visualizer.
Which one should you use?
- One grid, named areas, export to a sandbox: Layoutit Grid.
- An equal grid, as fast as possible: cssgridgenerator.io.
- A pre-made website layout: CSS Portal, or the layout examples here.
- Different layouts at different widths: this site's responsive grid generator.
- Tailwind or Bootstrap markup: the Tailwind and Bootstrap grid generators.
Whichever tool you use, the properties behind it are the same. The guides to grid-template-areas, grid-template-columns and Grid vs Flexbox explain what the generated code does.
Frequently asked questions
Is cssgridgenerator.io the same as Sarah Drasner's CSS Grid Generator?
Which CSS grid generator supports media queries?
@media queries into the output. The others produce one static grid; you add breakpoints by hand afterwards.Which CSS grid generator is open source?
Which CSS grid generator uses grid-template-areas?
grid-template-areas by default, and AngryTools does in one of its three output styles. cssgridgenerator.io, the Netlify generator and CSS Portal place items by line number.