CSS Grid Generator
Build a CSS Grid layout and copy the grid-template rule, with a live preview.
Build a CSS Grid layout by hand. Set how many columns and rows you need, size each track (1fr, auto, 200px, anything CSS accepts), pick the gaps, then copy the rule. The preview updates live.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}About CSS Grid Generator
Lay out a CSS Grid without memorizing the syntax. Set the number of columns and rows, size each track however you like (1fr, auto, fixed pixels, minmax, whatever CSS takes), and choose the column and row gaps. The tool writes the grid-template-columns, grid-template-rows, and gap declarations for you, collapsing equal tracks into repeat() the way you'd write them by hand. A live preview shows the cells as you go, and presets cover common layouts like a sidebar, the holy-grail three-column page, and an even photo gallery.
Why generate grid CSS
CSS Grid is the cleanest way to build two-dimensional layouts, but the track syntax (fr units, repeat(), minmax) trips people up. This builds the rule for you so you can see a layout, tweak it, and paste working CSS instead of guessing at values.
Sizing tracks
- Use 1fr to share leftover space equally, a pixel value like 240px for a fixed sidebar, auto to fit content, or minmax(0, 1fr) to let a track shrink below its content
- When every track in a row or column is the same, the output collapses to repeat(N, value) to keep it readable
Gaps and presets
Set one gap for both directions or different column and row gaps. Start from a preset (3 equal columns, sidebar + content, holy grail, photo gallery) and adjust from there. Everything runs in your browser - nothing is uploaded.