CSS Grid Generator

How to use the css grid generator

1. Adjust the controls and watch the preview update.
2. Read the generated CSS below the controls.
3. Copy it into your stylesheet.

About this tool

Grid places items in rows and columns at the same time, which is the difference from flexbox: tracks line up across the whole container rather than within each line.

The fr unit divides leftover space after fixed sizes are taken, so 1fr 2fr gives a third and two thirds. Using percentages instead is the usual cause of a grid overflowing, since percentages do not account for the gap.

The responsive pattern worth knowing is repeat(auto-fit, minmax(200px, 1fr)): it fits as many columns as will hold at least 200px and shares the remainder, giving a layout that reflows down to one column with no media query at all.

Common uses

• A card grid that reflows without media queries.
• A page shell with a fixed sidebar and fluid main column.
• Getting grid-template-columns right before writing it by hand.

Frequently asked questions

What does fr mean?

A fraction of the space left after fixed-size tracks and gaps. 1fr 2fr splits the remainder one third and two thirds.

How do I make a grid responsive without media queries?

repeat(auto-fit, minmax(200px, 1fr)) fits as many columns as will hold 200px and shares the rest, collapsing to one column on narrow screens.

Why does my grid overflow?

Usually percentage columns plus a gap, which together exceed 100%. Use fr, which is calculated after gaps are subtracted.