CSS Grid Generator

Columns, rows, gap, and the CSS for them.

Column sizing

Columns, rows, gap, and the CSS for them.

How to use it

  1. Choose the sizing. Equal gives a fixed count. Auto fit wraps to as many columns as the container holds.
  2. Set the counts and gap. Auto fit ignores the column count, by definition.
  3. Copy the rule. A complete class, ready to paste.

When you would use this

Grid is not hard, but grid-template-columns is easy to write slightly wrong, and the failure is usually silent: the layout still renders, just not the way you meant. An equal grid is repeat and a count. A responsive one is repeat with auto-fit and a minmax, which reads as an incantation until you see it wrap. The preview here shows the auto-fit case at a 720 pixel container, an ordinary content width, and says so, because auto-fit has no column count of its own and any preview that does not tell you what it assumed is hiding something. The difference between auto-fit and auto-fill is the one thing worth reading twice. When there are fewer items than columns, auto-fit collapses the empty tracks and the items stretch across the row; auto-fill keeps the empty tracks and the items stay narrow. Auto-fit is nearly always what people mean, so it is what this writes.

Questions

What does the auto fit preview assume?
A 720 pixel container, which is an ordinary content width. Auto fit has no column count of its own, so any preview has to assume one. Measuring against the preview box itself would be narrower than a single column and collapse to one, which is the one case that shows nothing about what auto fit does.
Why is there no row template on auto fit?
Because there cannot be a meaningful one. Auto fit decides the column count from the available width, so the number of rows falls out of how many items there are. Writing a fixed row count alongside it would fight the layout.
What is the difference between auto-fit and auto-fill?
With fewer items than fit, auto-fit collapses the empty tracks and the items stretch to fill the row, while auto-fill keeps the empty tracks and the items stay their minimum size. Auto-fit is what people usually want and what this generates.