SeaGit UI

bySeaGit

Landing sample

Get the kit

CSS Grid Generator

Build a CSS grid visually: pick the number of columns or an auto-fit track size, set the gaps, and copy the resulting rule. The preview updates as you change each value. Nothing is uploaded; the generator runs in your browser.

The generator covers the common cases in CSS Grid Layout Module Level 1: a fixed column count, an optional fixed row count, separate row and column gaps, and a responsive template that needs no media query.

Column mode
3
112
0
012
16
080
16
080
Preview
1
2
3
4
5
6
Generated CSS
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

How to use it

  1. Choose Fixed columns for a set number of tracks, or Auto-fit for a responsive grid.
  2. Set the column count (or the minimum column width for auto-fit) with the sliders.
  3. Set the row and column gaps. If they match, the output uses the single gap shorthand.
  4. Check the preview, then copy the .grid rule and apply the class to your container.

About the CSS behind it

The grid container is set with display: grid. The track layout is set by grid-template-columns, and the spacing between tracks by gap, row-gap and column-gap. These properties and the fr unit are defined in the W3C CSS Grid Layout Module Level 1 specification.

A fr track takes a share of the leftover space. Wrapping it as minmax(0, 1fr) prevents the track from being sized by its content's minimum width, which is the most common reason a grid overflows on narrow screens. The repeat(auto-fit, minmax(...)) form is defined in the same specification and collapses empty tracks, so the remaining tracks fill the row.

Use a fixed column count for dashboards and layouts where the number of columns is part of the design, and auto-fit for card lists, galleries and product grids. For a two-dimensional layout with named areas, write the template with grid-template-areas by hand; this generator does not produce named areas.

Frequently asked questions

What does the CSS grid generator output?
A single .grid rule with display: grid, a grid-template-columns value and gaps. Rows are added only when you set a fixed row count. You can paste the rule straight into a stylesheet or a CSS module.
Why does the output use minmax(0, 1fr) instead of 1fr?
A plain 1fr track has a minimum of auto, so it can grow to fit wide content such as long words or images and push the grid past its container. minmax(0, 1fr) lets the track shrink to the available space.
What is auto-fit and when should I use it?
repeat(auto-fit, minmax(...)) creates as many columns as fit the container at its current width, then stretches them to fill it. It is the usual choice for card grids that should reflow without media queries.
Does the generator add a fallback for older browsers?
No. CSS Grid is supported in all current evergreen browsers. If you must support an old browser, check the support table on MDN before you rely on grid for the layout.

Related tools and components