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.

Why a generator instead of just copying an example

The exact column width depends on three interacting values — the container width, the gutter size, and the column count — and those values change per project. Getting the maths right matters for designs that need columns to align with a fixed pixel grid (common in design-system work, or when sizing images to fill exact column widths). The preview shows you the resolved column width so you can verify it matches your design before committing.

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. Without this, a single long word or an unsized image can push one column wider than intended and break the layout. The resolved column width shown in the preview is calculated as:

column width = (max-width − 2 × padding − (N − 1) × gutter) / N

For a classic 12-column layout at a 1200px max-width with 24px gutters and 16px of side padding: (1200 − 32 − 264) / 12 = 75.33px per column.

Span helpers and layout patterns

The generated CSS includes a set of col-span-* classes so you can place content without writing grid-column by hand:

.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }   /* quarter width on 12-col */
.col-span-4  { grid-column: span 4; }   /* third width */
.col-span-6  { grid-column: span 6; }   /* half width */
.col-span-8  { grid-column: span 8; }   /* two-thirds */
.col-full    { grid-column: 1 / -1; }   /* full row */

Common layout recipes on a 12-column grid:

Responsive behaviour

The base grid keeps a fixed column count at all sizes. For responsive behavior, add a media query that reduces the column count on smaller screens:

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

Alternatively, replace the fixed count with repeat(auto-fit, minmax(240px, 1fr)) for a fluid wrapping grid that automatically adds or drops columns as the viewport changes.