CSS Grid Generator

CSS Grid is a two-dimensional layout system that arranges content into columns and rows at once. You make a container with display: grid, define tracks with grid-template-columns and grid-template-rows, add space with gap, and align items in their cells. Unlike flexbox (one axis at a time), grid controls both axes together — ideal for page layouts, dashboards and galleries.

The fr unit is a fraction of the available space, so 1fr 1fr 1fr makes three equal columns. repeat(3, 1fr) is the compact way to write that. This generator outputs repeat(N, 1fr) for your chosen columns and rows — the most common flexible grid; you can edit the fr values by hand for unequal tracks.

Flexbox is one-dimensional — a single row or column, best for nav bars and button groups. CSS Grid is two-dimensional — rows and columns together, best for page structure and anything that lines up both ways. Many designs use both: grid for the page skeleton, flexbox inside components. Try the Flexbox Generator too.

Yes. CSS Grid is supported in every modern browser (Chrome, Edge, Firefox, Safari) on desktop and mobile. The display: grid, grid-template-columns/rows, gap, justify-items and align-items properties this tool outputs are all widely supported. Everything runs in your browser and nothing is uploaded.