What is the difference between auto-fit and auto-fill?

Both work out the column count for you. auto-fill keeps empty tracks in place, while auto-fit collapses them so the existing items stretch to fill the row. Use auto-fit when a handful of items should still span the full width, and auto-fill when column width must stay fixed.

When should I use fr instead of auto?

fr divides the leftover space, so 1fr takes an equal share regardless of content length. auto sizes the track to its content. Use fr for columns that must match each other, and auto for columns that should hug what is inside them.

CSS / FRONTEND · RUNS IN YOUR BROWSER

CSS Grid Generator

Set columns, rows, gaps, and alignment with a live preview and copyable grid CSS.

The preview supports up to 12 columns and 12 rows across equal, auto-fitting, and custom track modes.

Preview

Preview backdrop

LightDarkTransparent

Generated CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 12px;
  justify-items: stretch;
  align-items: stretch;
}

Column tracks

Column mode

EqualAuto-fitCustom

Columns

Rows

Spacing and alignment

Column gap

Row gap

justify-items

align-items

About this tool

Equal mode uses `repeat(n, 1fr)` for evenly divided columns. Responsive mode uses `repeat(auto-fit, minmax(...))`, which reflows on its own without a single media query. Custom mode lets you type a track list such as `1fr 2fr 1fr`. Whatever you type is parsed back into numbers and units and rebuilt, so an invalid fragment is dropped rather than passed through.

How it works

Choose equal, auto-fitting, or custom track mode.
Set the column and row counts and the gaps.
Adjust item alignment, then copy the grid CSS.

Privacy

Every calculation and preview runs inside this browser. Your input is never uploaded, stored, or written to the URL or any log.

Frequently asked questions

What is the difference between auto-fit and auto-fill?: Both work out the column count for you. auto-fill keeps empty tracks in place, while auto-fit collapses them so the existing items stretch to fill the row. Use auto-fit when a handful of items should still span the full width, and auto-fill when column width must stay fixed.
When should I use fr instead of auto?: fr divides the leftover space, so 1fr takes an equal share regardless of content length. auto sizes the track to its content. Use fr for columns that must match each other, and auto for columns that should hug what is inside them.

← All CSS / Frontend tools