CSS Grid Generator

Build a CSS grid layout visually. Set column and row tracks (using fr, px, %, or auto), control gaps, and see the result on real grid items. Copy the generated CSS.

How to use the CSS Grid Generator

Type column and row track lists in normal CSS Grid syntax: 1fr 2fr 1fr, repeat(3, 1fr), 200px auto, repeat(auto-fill, minmax(120px, 1fr)). The preview updates live. Quick presets cover common layouts.

Two-dimensional layout with CSS grid

CSS Grid lays content out in rows and columns at the same time, and its real power is the track syntax: the fr unit splits leftover space into fractions, repeat() avoids repetition, minmax() sets flexible bounds, and auto-fill creates as many tracks as fit. Typed blind, these are hard to picture; rendered on real items, they make immediate sense.

Enter column and row track lists in normal grid syntax and watch the layout update live, with presets for a 3×2 grid, an auto-fill card grid, and a sidebar layout. For single-axis layouts — a nav bar, a centered row — the flexbox playground is simpler, and the grid-to-flex converter shows the same patterns built both ways.

Common use cases

  • Page layouts — build header, sidebar, main, and footer regions.
  • Card grids — use auto-fill with minmax for responsive galleries.
  • Dashboards — place widgets across a fixed track structure.
  • Forms — align labels and inputs into clean columns.
  • Learning grid — experiment with fr, repeat, and minmax visually.

Frequently asked questions

What does the fr unit do?
It distributes leftover space in fractions, so 1fr 2fr 1fr gives a middle column twice as wide as each side column.

How does auto-fill with minmax work?
repeat(auto-fill, minmax(120px, 1fr)) creates as many columns of at least 120px as fit, then stretches them to fill the row — a responsive grid with no media queries.

Can I use pixels and percentages too?
Yes. Track lists accept fr, px, %, auto, and functions like repeat and minmax in any combination.

When is flexbox the better choice?
For one-dimensional layouts. The flexbox playground covers single rows or columns.
Embed this tool on your site

Free to embed, no attribution required (but appreciated). Paste this where you want the tool to appear: