Processing and privacy
Processing varies by tool. Check the instructions for local processing, server requests, external services and any file or request limits before entering sensitive information.
Read the privacy policyShare this tool
Found it useful? Send it to a friend or teammate.
Rate this tool
5.0
1 rating
- 5 stars 1
- 4 stars 0
- 3 stars 0
- 2 stars 0
- 1 star 0
Clear instructions
Find steps, examples and limitations below.
Use online
Open the tool in a supported web browser.
Free to use
No sign-up required. Tool-specific limits may apply.
How to use the CSS Grid Generator
Build a CSS grid with configurable tracks, gaps and a spanning first item.
- 1 Set Columns, Rows, Column gap and Row gap.
- 2 Choose Column size and optionally let the first item span two columns.
- 3 Copy the generated CSS and test it with real content.
Example and practical tips
Choose responsive auto-fill tracks for cards that should wrap as the container width changes.
Frequently asked questions
What is minmax(0, 1fr) for?
It lets equal tracks shrink below their content’s automatic minimum. Long content may still need wrapping rules.
Does the preview set my website breakpoints?
No. Apply and test the output in your own container; add responsive rules if the layout needs them.
Practical guides
-
How to Use CSS Grid Generator
Build CSS grid layouts visually. Set rows, columns and gaps, preview the grid live and copy the CSS and HTML. Free online CSS grid generator.
Report an issue
Something broken or not quite right? Tell us and we will look into it.