CSS Grid

Configure columns, rows and gap and copy the grid CSS. Free, runs entirely in your browser — no signup, and nothing you paste in is uploaded.

Grid's power is in the unit that only exists here. `fr` distributes leftover space after fixed items are placed, so `1fr 2fr` is a ratio rather than a percentage and does not break when you add a gap — which is exactly where the old percentage-plus-margin approach failed.

The pattern worth learning by heart is `repeat(auto-fit, minmax(240px, 1fr))`. It creates as many columns as fit at the minimum width and stretches them to fill the row, giving a responsive card layout with no media queries at all. Note the gap is only between tracks, never outside them, so outer spacing stays the container's job.