CSS Grid Builder
Set the number of even columns and rows and the gap between them. Preview the layout before copying its CSS.
CSS Grid builder
Live grid preview
Change the grid values to update the preview and CSS.
A QUICK WALKTHROUGH
How to use this tool
- Set 1–12 columns and rows and a gap from 0–64 pixels.
- Review the live grid preview.
- Copy the generated CSS into your stylesheet.
A live preview for common layouts
The preview updates as you change the number of columns, rows, and the pixel gap. It creates one labeled cell for each row-column position.
Copyable CSS with clear limits
The output uses equal minmax(0, 1fr) columns and rows with a 64 px minimum height. This builder does not edit named grid areas, uneven track sizes, breakpoints, or individual grid-item placement.
Generated in your browser
The preview and CSS are created locally in this page. Nothing is sent to a server.
GOOD TO KNOW
Common questions
Can I set different sizes for each column?
No. All columns share equal fractional width in this builder. Edit the generated CSS if you need different track sizes.
Can I name grid areas?
No. This focused version sets a uniform row-and-column grid and gap only.
What is the gap measured in?
The gap is an integer from 0 to 64 CSS pixels.