Why does the output use minmax(0, 1fr) instead of 1fr?

A plain 1fr track has an implicit minimum size of auto, so a grid item with very wide content (a long word, a pre block, an image) can force its column wider than 1fr and break the layout. minmax(0, 1fr) sets the minimum to 0, keeping all columns truly equal.

What is a gutter in a grid?

The gutter is the space between columns, set with the CSS gap property. Common gutters are 16px, 24px, or 32px. A larger gutter gives more breathing room; a smaller one fits more content. The gap does not add space on the outer edges.

Should I use px or rem for the gutter?

rem gutters scale with the user's root font size, which keeps spacing proportional when someone enlarges text for accessibility. px gutters stay fixed. Many teams use rem for spacing throughout a design system for that reason.

How do I make an item span multiple columns?

Use grid-column. The generated CSS includes .col-span-2 which applies grid-column: span 2, and .col-full which uses grid-column: 1 / -1 to span the entire row. Add more span helpers following the same pattern.

Is this grid responsive?

The base grid keeps a fixed column count at all sizes. For responsive behavior, wrap the grid-template-columns rule in a media query and reduce the column count on smaller screens, or switch to repeat(auto-fit, minmax(...)) for a fluid wrapping grid.

CSS Grid System Generator

CSS Grid makes column layouts trivial once you settle on the right declaration. This generator builds that declaration for you: an equal-column grid with a defined gutter, optionally wrapped in a centered max-width container, plus the small span helpers you reach for most often.

How it works

The container is a grid whose columns are defined with a single repeat call:

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}

repeat(N, minmax(0, 1fr)) creates N equal tracks. The minmax(0, 1fr) idiom is important: it forces each track’s minimum size to zero so wide content cannot stretch a column past its fair share. The resolved column width shown in the preview is (max-width − 2 × padding − (N − 1) × gutter) / N.

Tips and example

For a classic 12-column layout at a 1200px max-width with 24px gutters and 16px of side padding, each column resolves to roughly 75px. To place content, set grid-column: span 6 for a half-width block or grid-column: 1 / -1 to span the full row. For a fluid grid that wraps on its own, replace the fixed count with repeat(auto-fit, minmax(240px, 1fr)), which keeps columns at least 240px wide and adds or drops columns as the viewport changes.