CSS Grid Generator
Generate CSS Grid layout rules with customizable columns, rows, and pixel gaps.
Run tool
This CSS grid generator creates clean, ready-to-use CSS rules for modern web layouts. You can configure grid columns, grid rows, and spacing between grid tracks to structure page sections or responsive cards quickly. When you enter a single integer for columns, the generator converts it into standard CSS repeat notation using fractional units, such as three equal columns. You can also supply custom column definitions using standard CSS sizing units like pixels, percentages, or fractional tracks. Rows can be set to automatic sizing or configured with custom track measurements and repeated row counts. General gap spacing, column gaps, and row gaps accept numeric values that the tool formats directly into pixel declarations. The output provides a complete CSS ruleset with grid display declarations, template columns, template rows, and explicit track spacing, helping developers and designers prototype responsive page layouts without manually writing repetitive boilerplate code.
Instructions
- Enter the number of columns or provide custom column sizing tracks such as 200px 1fr.
- Specify row track sizing, enter a numeric row count, or leave the default automatic sizing.
- Set the general gap value in pixels, or enter distinct column and row gap measurements.
- Review the generated CSS snippet and copy it directly into your stylesheet.
Examples
- Using 3 columns, auto rows, and a 10px gap generates CSS with repeat(3, 1fr) for columns, auto for rows, and gap: 10px.
- Setting columns to 250px 1fr, rows to 2, and row gap to 20px produces CSS with display: grid, custom column tracks, repeat(2, auto) rows, and row-gap: 20px.
FAQ
How does the tool handle numeric column inputs?
When you enter a whole number for columns, the generator automatically formats it with CSS repeat notation using 1fr fractional units.
Can I use custom sizing units for columns and rows?
Yes, you can enter custom space-separated CSS values such as 200px 1fr or auto 1fr into the column and row input fields.
What unit is used for gap values?
All gap, column gap, and row gap numeric inputs are formatted using pixel (px) units in the generated CSS output.