1
2
3
4
5
6
7
8
9
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); gap: 12px;
e.g. 1fr, 200px, minmax(0,1fr)
gap12px
How to use
01
Choose your track counts
Enter a column count and a row count in the two number inputs, anywhere from 1 to 12 each. The preview redraws the cells instantly, numbering every one so you can count placements.
02
Size the tracks
Type a value into Column size and Row size. The fields accept any CSS track sizing: 1fr for equal shares, 200px for fixed tracks, minmax(0,1fr) to stop content blowouts. Adjust the gap slider to taste.
03
Copy the container rule
The CSS pane shows display: grid with grid-template-columns, grid-template-rows, and gap, all using repeat() notation. Hit the copy button and paste it onto your wrapper element to place its children into cells.
Why CSS Grid Generator
- Visual CSS Grid builder with live preview.
- Choose column count, row count, sizing track values, and gap.
- Supports any track size unit, fr, px, %, auto, minmax().
Common questions
Which properties does the css grid generator write?
Four: display: grid, grid-template-columns and grid-template-rows expressed with repeat(), and gap in pixels. That's a complete working container. Item placement properties like grid-column or grid-area are left for you to add per child.
How do I make grid columns with different widths?
The tool sizes every column with the same track value through repeat(), which covers most scaffolds. For a mixed layout like 2fr 1fr, copy the output and replace the repeat() call with an explicit track list by hand. This grid code generator gets you the structure; uneven tracks are a ten-second edit.
Can I use minmax() in the grid track size fields?
Yes. The Column size field accepts any valid track value, and the helper text suggests minmax(0,1fr) for a reason: plain 1fr tracks refuse to shrink below their content, while minmax(0,1fr) lets long words and wide tables stay contained.
Why do extra grid items create rows I never defined?
That's the implicit grid. If children outnumber the cells in your template, the browser invents new rows sized by grid-auto-rows, which defaults to auto. Either raise the row count here or set grid-auto-rows in your stylesheet so surprise rows match your design.
Does the grid gap slider control row and column gaps separately?
No, it writes a single gap value from 0 to 48px that applies to both directions. If you need them to differ, split the copied line into row-gap and column-gap. Most designs use one value, so the tool keeps it simple.
Is 1fr the same as 100 percent for a grid track?
No, and the difference matters. Percentages are measured against the whole container and ignore gaps, which is how three 33.3% columns end up overflowing. An fr unit divides only the space left over after fixed tracks and gaps are paid for, so it can never overflow on its own.
Should I build this layout with grid or with flexbox?
Ask whether you're designing in two dimensions. A card wall, dashboard, or full page scaffold with aligned rows and columns wants grid. A single row or column where content decides the sizing, like a tag list or toolbar, is flexbox territory. The css grid template generator here handles the first case.