The playground — tracks, fr, gap (two dimensions at once)
One rule — display:grid — turns a box into a grid container. Its children
are then placed into a matrix of rows AND columns simultaneously. Set the columns with
grid-template-columns, the gutter with gap, and watch the items reflow.
This is the grid/flex split: grid controls two axes; flexbox controls one.
1
2
3
4
5
6
—
auto-fit vs auto-fill — responsive with NO media queries
repeat(auto-fit, minmax(120px, 1fr)) makes as many ≥120px columns as fit, then
stretches them to fill the row — fully responsive with zero breakpoints. The catch: swap
auto-fit for auto-fill and empty tracks are kept (they steal a
1fr share), so the filled items end up narrower. Only 3 items here — toggle and watch
the measured item width change.
1
2
3
current:
auto-fit
—