What is 1fr in CSS Grid?

1fr means 1 fraction of the available space. grid-template-columns: 1fr 1fr 1fr creates three equal columns that share all available width. It's equivalent to 33.33% but more flexible.

What is minmax(0, 1fr)?

minmax(0, 1fr) is safer than plain 1fr in some cases. It prevents grid items from overflowing when content is wider than the cell, by allowing the minimum size to be 0 instead of auto.

What is the difference between gap and padding?

gap creates space between grid cells (gutter). padding creates space inside a cell between the border and content. gap is the right property for grid gutters.

CSS Grid Generator

Runs in browser

Visual CSS Grid builder with live preview. CSS and Tailwind output.

Visually build CSS Grid layouts. Configure columns, rows, gaps, and alignment with a live preview. Get instant CSS grid-template-columns output and Tailwind class equivalents.

Columns

Rows (0 = auto)

column size (grid-template-columns unit)

column-gap: 16px

row-gap: 16px

justify-items

align-items

CSS

display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;

Tailwind classes

grid grid-cols-3 gap-[16px]

🔒 Runs in your browser · No uploads · Your data never leaves your device

How to use

Set columns and rows
Choose the number of columns (1–6) and optionally set explicit rows. 0 rows = auto-generated rows.
Choose column size
Select the unit for grid-template-columns: 1fr (equal columns), auto, minmax, or fixed pixels.
Copy the CSS
Click 'Copy CSS' to get the full grid CSS rule. The Tailwind classes line shows the equivalent utility classes.

Common use cases

Building responsive grid layouts — Configure columns, rows, and gaps visually and copy the CSS grid rule into your stylesheet.
Learning CSS Grid properties — Experiment with grid-template-columns and gap values to see how they affect the layout in real time.

Examples

3-column equal layout
3 columns with 1fr each and 16px gap — the most common grid pattern.
Output
```
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
```

Frequently asked questions

What is 1fr in CSS Grid?: 1fr means 1 fraction of the available space. grid-template-columns: 1fr 1fr 1fr creates three equal columns that share all available width. It's equivalent to 33.33% but more flexible.
What is minmax(0, 1fr)?: minmax(0, 1fr) is safer than plain 1fr in some cases. It prevents grid items from overflowing when content is wider than the cell, by allowing the minimum size to be 0 instead of auto.
What is the difference between gap and padding?: gap creates space between grid cells (gutter). padding creates space inside a cell between the border and content. gap is the right property for grid gutters.

Key concepts

fr unit: A fractional unit in CSS Grid — 1fr means one fraction of the available space. Three 1fr columns create three equal columns.
grid-template-columns: The CSS property that defines the number and size of columns in a grid container.

You might find these useful too.

More css tools

CSS to Tailwind Converter
Convert CSS to Tailwind utility classes instantly. Figma Inspect supported.
Open