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.

What is the CSS Grid Generator?

Free visual CSS Grid generator — set columns, rows, gaps and track sizing, see a live preview, and copy ready-to-use grid CSS. Runs entirely in your browser. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Grid Generator — Gera Tools

Name: CSS Grid Generator
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

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

Understanding `fr` vs `px` vs `auto`

The track sizing unit is the most important choice:

fr (fractional unit) divides the leftover space in the container after fixed tracks and gaps are subtracted. Three 1fr columns always fill the full width and stay equal as the container resizes. This is what most card grids and dashboards use. You can mix: 200px 1fr 1fr gives a fixed sidebar and two equal content columns.

px (or any fixed length) creates tracks that do not respond to the container width. They overflow if the container shrinks below the total track width plus gaps. Use fixed tracks for UI chrome that has a known, fixed size — icon columns in a table, avatar slots in a list.

auto sizes each track to fit its content — similar to width: fit-content. This is useful for tables where you want each column to shrink to its longest cell. When all tracks are auto, the grid distributes space as needed; columns with more text get more width.

Beyond the generator: patterns to know

This tool generates uniform grids. Once you have the base template, you can extend it in your stylesheet:

Auto-filling responsive card grid — avoids needing fixed column counts:

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

This creates as many columns as fit at 240px minimum, and they grow to fill the row. No media queries needed for a basic card layout.

Mixed track sizes — combine units for a classic two-column layout:

grid-template-columns: 280px 1fr;

A 280px sidebar, the rest for content.

Named lines and areas — span items across multiple cells:

grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";

Then place items with grid-area: header on the relevant element.

Everything runs in your browser — nothing is uploaded.