Stax

CSS Grid Generator

Build CSS Grid layouts visually with live preview.

grid-template-columns

grid-template-rows

1
2
3
4
5
6
7
8
9
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 8px;
}

Visual CSS Grid builder

Designing CSS Grid layouts by hand requires memorising complex syntax. This generator lets you set columns, rows, gap, and alignment properties visually and see the result immediately in a live preview.

Use fr units and repeat() like a pro

The generator uses the fr unit and repeat() function by default, producing modern, responsive grid templates. Customise the template strings directly for advanced layouts like named grid areas or asymmetric column widths.

Frequently asked questions

What is CSS Grid?
CSS Grid is a two-dimensional layout system that lets you create complex web layouts with rows and columns simultaneously. Unlike Flexbox (which is one-dimensional), Grid controls both axes at once, making it ideal for page-level layouts.
What does repeat(3, 1fr) mean?
repeat(3, 1fr) creates 3 equal-width columns where each column takes one fraction of the available space. 1fr means one fraction unit — all three columns share the space equally. You can mix units: repeat(2, 1fr) 200px creates two flexible columns and one fixed 200px column.
What is the difference between grid-gap and gap?
gap is the modern property (previously grid-gap). It sets the space between rows and columns. You can set row and column gaps independently with row-gap and column-gap, or use the shorthand gap: row-gap column-gap.
When should I use Grid vs Flexbox?
Use Grid for two-dimensional layouts (rows AND columns simultaneously) like full page layouts, card grids, and complex dashboards. Use Flexbox for one-dimensional layouts (either rows OR columns) like navigation bars, button groups, and centering.
What does fr unit mean?
fr stands for fraction. It represents a fraction of the available space in the grid container. 1fr 2fr 1fr creates three columns where the middle is twice as wide as the outer ones. fr units are calculated after fixed and auto-sized tracks are resolved.

Related tools