What does repeat(3, 1fr) mean?

It's shorthand for three equal-width tracks, each taking one fraction (1fr) of the available space after gaps are subtracted — equivalent to writing `1fr 1fr 1fr` but easier to scale. This generator always uses equal fr tracks; edit the generated grid-template-columns manually for custom track sizes like `200px 1fr 2fr`.

What's the difference between column-gap and row-gap?

column-gap sets the space between grid columns, row-gap sets the space between grid rows. The shorthand `gap: ;` sets both at once — this tool outputs them separately so you can see and control each independently.

What happens if I have more cells than columns × rows?

Extra items flow into implicit rows the browser creates automatically, using grid-auto-rows (default size auto) — they don't disappear, but they may not line up with your explicit row count unless you also set grid-auto-rows.

Do grid items need explicit placement?

No — by default, grid items auto-place into the next available cell in the order they appear in the markup. Add grid-column / grid-row on individual items only when you need to span or reposition a specific one.

Is anything uploaded?

No — the preview and CSS are generated entirely in your browser with plain CSS Grid and JavaScript.

CSS GRID GENERATOR

Set columns, rows, and gaps and watch a live CSS Grid preview update as you go.

Columns: 3

Rows: 2

Column gap (px): 12

Row gap (px): 12

Cells to show: 6

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 12px;
  row-gap: 12px;
}

How to build a CSS Grid layout

1
Drag the Columns and Rows sliders to set the grid-template-columns/rows track counts.
2
Adjust Column gap and Row gap independently to control spacing between cells.
3
Change Cells to show to preview how content fills (or overflows) the grid.
4
Copy the generated .container CSS and paste it into your stylesheet.

Questions

What does repeat(3, 1fr) mean?: It's shorthand for three equal-width tracks, each taking one fraction (1fr) of the available space after gaps are subtracted — equivalent to writing `1fr 1fr 1fr` but easier to scale. This generator always uses equal fr tracks; edit the generated grid-template-columns manually for custom track sizes like `200px 1fr 2fr`.
What's the difference between column-gap and row-gap?: column-gap sets the space between grid columns, row-gap sets the space between grid rows. The shorthand `gap: <row-gap> <column-gap>;` sets both at once — this tool outputs them separately so you can see and control each independently.
What happens if I have more cells than columns × rows?: Extra items flow into implicit rows the browser creates automatically, using grid-auto-rows (default size auto) — they don't disappear, but they may not line up with your explicit row count unless you also set grid-auto-rows.
Do grid items need explicit placement?: No — by default, grid items auto-place into the next available cell in the order they appear in the markup. Add grid-column / grid-row on individual items only when you need to span or reposition a specific one.
Is anything uploaded?: No — the preview and CSS are generated entirely in your browser with plain CSS Grid and JavaScript.