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.

Design

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.

ColumnsRowsColumn gapRow gap

Column sizes

Row sizes

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 16px;
}

Preview (6 cells)

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.