CSS Grid Generator
Visualize and copy CSS grid layouts.
Generated CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
}Generate CSS Grid Layouts
CSS Grid is the most powerful layout system in CSS, built for two-dimensional layouts with rows and columns. This generator lets you set the number of columns and rows and the gap, preview the grid, and copy the CSS.
Key properties
- grid-template-columns â column track sizes
- grid-template-rows â row track sizes
- gap â spacing between tracks
- repeat() and fr units for flexible tracks
The fr unit
1fr means 'one fraction of the available space'. repeat(3, 1fr) creates three equal columns that share the row width â responsive without media queries.
Private & Processed Locally
The CSS is generated in your browser; nothing is uploaded.
Frequently Asked Questions
Common questions about the CSS Grid Generator.
What can I configure?
The number of columns and rows and the gap between tracks, using repeat() and fr units.
What is the fr unit?
1fr is one fraction of the available space, so repeat(3, 1fr) makes three equal columns.
Is it private?
Yes, the CSS is generated in your browser.