CSS grid generator

Preview a grid layout and copy the CSS.

Columns 3 Rows 2 Gap (px) 12

You know grid-template-columns exists, but it is hard to picture what four columns with a 20px gutter actually look like until you see it. Rather than saving and refreshing between every tweak, drag three sliders here and the numbered boxes rearrange as you go. When the layout looks right, the code below it is already written.

How it works

What the sliders control

Each slider maps to one declaration in the generated rule:

Slider	Range	CSS it writes
Columns	1-8	`grid-template-columns: repeat(N, 1fr)`
Rows	1-8	`grid-template-rows: repeat(N, auto)`
Gap	0-40px	`gap: Npx`

The numbered boxes are the grid cells themselves, so you can count them and see where your items would land.

About `1fr` and `auto`

fr is a fraction of the leftover space. repeat(3, 1fr) splits the container into three equal columns that shrink and grow with the viewport, unlike fixed pixel widths, which overflow the moment the screen gets narrow.

The generated rows use auto, meaning each row ends up as tall as its tallest item. The preview draws fixed-height rows so the numbers stay readable, so expect uneven row heights in your real layout until you set a height yourself.

Making it responsive

The output has a fixed column count. For a grid that reflows on its own, replace the columns line with:

grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

That fits as many columns of at least 220px as the space allows, and drops to fewer on narrow screens without a media query.

Copy the block and rename .container to match your markup. Only the wrapper needs these rules - its direct children become grid items on their own.

Terms explained

grid-template-columns: Defines how many columns the grid has and how wide each one is. repeat(3, 1fr) means three equal columns.
fr: A fractional unit representing a share of the free space left in the container. Two 1fr columns take half each.
gap: The space between rows and columns. It applies only between tracks, never around the outer edge of the grid.
auto (row size): A row height that adjusts itself to fit the tallest item inside that row.
Grid item: Any direct child of the grid container. It becomes an item automatically, with no CSS needed on the child.

Frequently asked questions

Do I need to add CSS to the child elements?

No. Every direct child of an element with display: grid becomes a grid item automatically and fills the next cell in order. You only write rules on a child when you want it to span several columns or rows, using grid-column or grid-row.

Should I use Grid or Flexbox?

Grid is for two-dimensional layouts where you place things into rows and columns at the same time, such as a card gallery or a page skeleton. Flexbox handles one direction at a time, like a nav bar or a row of buttons. Using Grid for the page and Flexbox inside individual cells is a common and perfectly reasonable combination.

Why does my grid look different from the preview here?

The preview gives every row a fixed height so the numbered boxes stay visible, while the generated code uses auto, which sizes each row to its content. If you want uniform rows in your own layout, replace auto with a value such as 120px or minmax(120px, auto).

How do I set different spacing for rows and columns?

Use row-gap and column-gap instead of the single gap shorthand. For example, row-gap: 24px; column-gap: 12px; gives more breathing room vertically than horizontally, which often reads better in card grids.