CSS Grid Generator
Set columns, rows and gap with sliders, see a live preview, and copy the CSS. Free, no sign-up.
The repeat() shorthand
This generator uses repeat(N, 1fr), which creates N equal columns that share the
available space. The fr unit means "fraction of the free space", so the grid stays
fluid and responsive without any media queries. Adjust the gap to control the spacing between
cells.
Frequently asked questions
What is CSS Grid?
CSS Grid is a two-dimensional layout system for the web. It lets you arrange elements into rows and columns at the same time, which makes complex page layouts far simpler than older float- or inline-block-based techniques.
How do I use this generator?
Drag the sliders to set the number of columns, rows and the gap. Watch the live preview, then copy the generated CSS into your stylesheet and apply it to a container element.
Grid or Flexbox — which should I use?
Use Flexbox for one-dimensional layouts (a row or a column of items) and CSS Grid for two-dimensional layouts (rows and columns together). They work well side by side.
Is this tool free?
Yes — it runs in your browser, is free, and needs no sign-up.