CSS Grid Generator
A CSS grid generator lets you build a grid by clicking instead of guessing property values. Set the columns, rows, gaps and track sizes and the code panel writes the rule for you: the default 3 × 3 grid produces .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 16px 16px; } plus nine matching divs.
Settings
Item Properties
Preview
Generated Code
About CSS Grid Generator
The tool opens on a 3 × 3 grid with 16-pixel gaps and every track set to 1fr. The Settings panel on the left changes Columns and Rows, Column Gap and Row Gap, and then lists one text field per track under Column Sizes and Row Sizes, so a track can be 1fr, 200px, auto, minmax(200px, 1fr) or anything else CSS accepts. The Alignment block exposes the four container properties — justify-items, align-items, justify-content and align-content — each as stretch, start, center or end.
Six preset buttons set everything at once: Holy Grail (three columns of 200px, 1fr, 200px over auto, 1fr, auto rows), Sidebar (250px and 1fr), Dashboard (four equal columns over auto, 1fr, 1fr), Gallery (3 × 3 with 8-pixel gaps), Blog (1fr, 2fr, 1fr over auto and 1fr) and Cards (3 × 2 with 24-pixel gaps).
The preview to the right is a real CSS grid, not a picture of one, so it reflows exactly as a browser would. Each cell is a coloured block you can click to select; the selected one gets a white outline and its column and row span become editable. The Generated Code panel underneath prints the whole thing: a style block with .grid-container, an .item-N rule for every cell whose span you changed, and the HTML divs. Three buttons copy the CSS, the HTML or both.
Two details worth knowing. The gap is written as two values — row gap first, then column gap — which is the order the CSS gap shorthand expects, so gap: 16px 24px means 16 pixels between rows. And .item-N rules only appear for cells you moved: a plain grid produces a container rule and nothing else, which is usually what you want to paste. Nothing is uploaded and nothing is saved between visits.
Use Cases
How to use
Start from a preset — Holy Grail, Sidebar, Dashboard, Gallery, Blog or Cards — or leave the default 3 × 3 grid.
Set Columns, Rows, Column Gap and Row Gap in the Settings panel.
Edit the individual track values under Column Sizes and Row Sizes; each field takes any CSS track value, such as 1fr, 200px or minmax(200px, 1fr).
Use the Alignment selects for justify-items, align-items, justify-content and align-content, and click a block in the preview to change one cell's span.
Read the Generated Code panel and press Copy CSS, Copy HTML or Copy All.
Take the result from Generated Code using the CSS button, the HTML button, or Copy All for the markup and stylesheet together.
Pro Tips
- The track fields take any valid CSS value, not just numbers — minmax(200px, 1fr), auto, min-content and repeat-free values all work, because the text is copied straight into grid-template-columns.
- gap is printed as row gap then column gap, so gap: 16px 24px is 16 pixels between rows and 24 between columns; set them to the same number if the two-value form confuses reviewers.
- Only cells you have moved get an .item-N rule, so if the code shows nothing but .grid-container that is correct — the default placement needs no per-item CSS.
- Click a block in the preview to select it: the white outline shows which cell the span fields are editing, and clicking it again deselects.
- Presets overwrite the track sizes and the gaps, so apply the preset first and make your changes afterwards, not the other way round.
Troubleshooting
The preview looks nothing like my page.
The preview container is 100% wide with a minimum height of 300 pixels and no other styling, while your page has its own width, padding and font. Paste the code into your layout to judge it there — the grid properties are identical, only the box around them differs.
Changing Columns reset my item spans.
Changing the column or row count rebuilds the item list and repositions everything on the default grid, because a span that referred to column four is meaningless in a three-column grid. Set the size of the grid first, then adjust individual cells.
A preset wiped the track sizes I typed.
Presets set the columns, the rows, every track size and, for Gallery and Cards, the gaps as well. That is their purpose. Apply the preset you want as a starting point and edit afterwards; there is no undo, so copy the CSS out first if you want to keep it.
The gap looks wrong in one direction.
The shorthand prints row gap first and column gap second, so gap: 8px 24px puts 8 pixels between rows and 24 between columns. If that reads backwards to you, set Column Gap and Row Gap to the same value and the ambiguity disappears.
The copy buttons do nothing.
They use the browser clipboard API, which needs a secure page and a real click and can be blocked by an extension. If the button does not switch to its tick, select the code in the black panel and press Ctrl+C, or Cmd+C on a Mac.
Frequently Asked Questions
Set display: grid on the container, then describe the tracks with grid-template-columns and grid-template-rows and the spacing with gap. This page writes exactly that: the default produces .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 16px 16px; } and the nine child divs that go with it.
A visual editor for the container properties. Instead of typing grid-template-columns and reloading to see the result, you set columns, rows, gaps and track sizes with fields, watch a live grid respond, and copy the finished rule. The output here is plain CSS with no framework and no class-name conventions to learn.
It is a fraction of the free space left after fixed tracks and gaps are subtracted. Three columns of 1fr each take a third of what remains; 1fr 2fr 1fr gives the middle column half. The Holy Grail preset mixes the two ideas — 200px 1fr 200px keeps the outer columns fixed and lets the middle absorb the rest.
They solve different problems rather than competing. Grid places items on rows and columns at the same time, which is what this tool generates; Flexbox lays items along a single axis and is better for a row of buttons or a navbar. A page commonly uses grid for the overall layout and flex inside individual cells.
Yes, and it is normal. A grid child can itself be display: flex, so the container rule from this page positions the block and a flex rule you add arranges its contents. Nothing in the generated CSS prevents it: the .grid-container rule only affects direct children's placement.
With the Alignment block. justify-items: center centres each item horizontally inside its cell and align-items: center centres it vertically; justify-content and align-content move the whole grid inside the container when the tracks do not fill it. Set them here and the properties appear in the CSS only when they differ from stretch.
Click that block in the preview to select it, then change its column end. The generated CSS gains an .item-N rule with grid-column: start / end for that cell alone — for example grid-column: 1 / 3 spans the first two columns. Cells you did not touch stay out of the CSS entirely.
Yes. Grid has been supported by every current major browser for years, and the properties this tool writes — display, grid-template-columns, grid-template-rows, gap and the four alignment properties — are the standard, unprefixed ones. If you have to support a browser from before that, a flex fallback is the usual route.
Historically it meant a framework's set of column classes, such as a twelve-column row you built pages out of. CSS Grid replaces that with a layout mode in the language itself, so instead of adding classes you declare the tracks. That is why the code this page produces has one container class and no column-count classes at all.
The style block goes in your stylesheet or a style element, and the divs go where the layout should appear. The Copy CSS and Copy HTML buttons split the two for you, while Copy All hands you the style block and the markup together, which is the fastest way to test it in a blank file.