CSS Grid generator
Build a CSS grid (columns, rows, gap) live and copy the CSS.
- Instant
- Free
- Private (processed locally)
- No sign-up
A CSS grid, built live
Choose the number of columns, rows and the gap: the preview shows the cells in real time and the container CSS is ready to copy.
-
Set the columns
1 to 8 equal tracks (1fr).
-
Set rows and gap
Number of rows and spacing.
-
Copy the CSS
Apply it to your grid container.
The container CSS (default)
| Property | Value |
|---|---|
| display | grid |
| grid-template-columns | repeat(3, 1fr) |
| grid-template-rows | repeat(2, 1fr) |
| gap | 8px |
The 1fr unit shares space equally. For responsiveness, replace with repeat(auto-fit, minmax(...)). Everything is generated locally.
Frequently asked questions
What is the difference between CSS Grid and Flexbox?
Flexbox lays out items on a single axis (row or column); Grid works in two dimensions (columns and rows at once). Grid is ideal for full page layouts, Flexbox for simple alignments.
What does repeat(3, 1fr) mean?
It is shorthand for “3 columns of 1 fraction each”. The fr unit shares the available space equally. So repeat(3, 1fr) creates three equal-width columns that fill the container.
How do I make the grid responsive?
Replace a fixed number with repeat(auto-fit, minmax(200px, 1fr)): columns adjust automatically to the width. This tool generates a fixed-count base you can adapt afterwards.
Does the CSS apply to the container or the cells?
To the container: display: grid and the grid-template properties define the structure. Child cells place themselves automatically in the created tracks.