CSS Grid Generator
Grid columns, rows and gap with a preview.
Runs in your browser. Nothing is uploaded — your input is processed on this device and discarded when you close the tab.
CSS Grid Generator
How to use this tool
- Enter the number of columns, rows and the gap in pixels.
- Press Generate. The preview shows one numbered cell per grid position.
- Copy the CSS and apply the class to your grid container.
Worked example
With 3 columns, 2 rows and a 16px gap, the CSS is 'display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 16px;' and the preview shows 6 cells.
What this tool does not do / Limits
Equal-width columns and equal-height rows only (1fr each): uneven track sizes, named areas and auto-placement rules are not supported, and the preview cells are plain numbered boxes.
Frequently asked questions
What does 1fr mean?
One fraction of the free space in the container. With repeat(3, 1fr), three columns share the width equally.
Can I make one column wider?
Not with this tool, which uses equal tracks only. In your own CSS, replace repeat(3, 1fr) with sizes such as '2fr 1fr 1fr' for a wider first column.
Related tools
JSON Studio
Format, validate, minify, query and compare JSON in your browser, with precise line-and-column errors.
LiveRegex Tester
Test patterns against sample text with match highlighting, capture groups and a safe one-second timeout.
LiveSecurity Header and DNS Checker
Check HSTS, CSP and other security headers, TLS details, and DNS/email authentication records (SPF, DKIM, DMARC).
Live