What is the difference between fr, px and auto tracks?

fr distributes leftover space proportionally, px is a fixed pixel size, and auto sizes each track to fit its content. The generator switches all tracks between these for a quick preview.

How do I set the gap between grid items?

Use the gap property, which is shorthand for row-gap and column-gap. This tool outputs gap as two values — row gap first, then column gap.

Is my layout sent anywhere?

No — the grid CSS is generated entirely in your browser and nothing is uploaded.

What does repeat() do in the generated CSS?

repeat() is shorthand that repeats a track size a set number of times. repeat(3, 1fr) is the same as writing 1fr 1fr 1fr, so it keeps the grid-template-columns value compact for many columns.

What does 1fr mean in CSS Grid?

fr is the fractional unit. It splits the leftover space in the container after fixed sizes and gaps are accounted for. Three columns of 1fr each take one third of the available width and stay equal as the container resizes.

How do I make a responsive grid that wraps automatically?

For auto-wrapping cards, use grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) in your own CSS. This tool generates a fixed column count; the auto-fill/minmax pattern is the next step once you know the minimum card width.

When should I use Grid instead of Flexbox?

Use Grid for two-dimensional layouts where you control rows and columns together, such as page or dashboard layouts. Use Flexbox for one-dimensional rows or columns of items.

CSS Grid Generator — Gera Tools

CSS Grid generator

This tool builds a CSS Grid container visually and gives you the display: grid rules to paste into your stylesheet. It is for developers who want a quick column/row layout without memorising grid-template syntax. Set the track count, choose the sizing unit, tune the gaps, and copy.

How it works

The generator writes a display: grid block with grid-template-columns and grid-template-rows built from repeat(count, size). The sizing unit you pick decides the track size: fr uses 1fr (each track shares leftover space equally), px uses fixed sizes (120px columns, 80px rows), and auto sizes each track to its content. The gap is written as two values — row gap first, then column gap — matching the CSS gap: <row> <column> shorthand. The preview is a real grid using the same template, filled with numbered cells.

Example

With 3 columns, 2 rows, row gap 12px, column gap 12px and the fr unit, the tool outputs:

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 12px 12px;

This makes a 3×2 grid of equal cells with 12px spacing in both directions.

Unit	grid-template-columns (3 cols)	Behaviour
fr	repeat(3, 1fr)	Equal, fills the container
px	repeat(3, 120px)	Fixed 120px columns
auto	repeat(3, auto)	Each column fits its content

Everything runs in your browser — nothing is uploaded.