CSS grid generator

Builds a `display: grid` rule with `repeat()` columns, rows and gaps, previewed as real boxes so you can see what the numbers do.

The choice that matters most is the column size, and `1fr` is not always right. `1fr` means one equal share of the free space — but its default minimum is `auto`, which means a column will refuse to shrink below its content. One long unbreakable string and the grid overflows its container, which is the single most common grid bug. `minmax(0, 1fr)` sets the minimum to zero and fixes it, at the cost of letting content overflow the column instead, where `overflow: hidden` or `min-width: 0` can catch it. For a responsive grid, the pattern to know is `repeat(auto-fill, minmax(220px, 1fr))`. It fits as many 220px-minimum columns as the width allows and shares the remainder between them, so the layout reflows with no media queries at all. `auto-fit` is the same but collapses empty tracks, which matters only when you have fewer items than columns — then `auto-fit` stretches them and `auto-fill` leaves gaps. `gap` takes row gap first when given two values, which is the reverse of what most people guess.