Layout
- Free forever
- No sign-up
- Instant results
CSS Grid Generator
Generate CSS grid-template-columns values for fixed or responsive grids. Supports both repeat(n, 1fr) and auto-fill with minmax() for grids that reflow automatically.
grid-template-columns
—
When would you use this?
CSS Grid is powerful but the syntax for grid-template-columns can be a bit verbose to type out from scratch every time. This generator gives you two modes: a simple fixed column count (repeat(12, 1fr)) and a responsive auto-fill grid with a minimum column width (repeat(auto-fill, minmax(200px, 1fr))). The second one is the secret to grids that automatically reflow as the screen gets smaller without any media queries.