Intrinsic sizing, calc() tracks & baseline

Track functions — min-content, calc() in minmax()/fit-content()

min-content fits the longest word; minmax(calc(30pt + 20pt), 80pt) floors at a calc()-resolved 50pt and grows to its 80pt limit while the space is there; fit-content(calc(60pt + 20pt)) caps at 80pt; 1fr takes what is left after all three.

Spanning item grows shared intrinsic columns

The dark bar spans both auto columns; each now takes a share of its width, so the second row's cells sit on real, non-zero tracks instead of collapsing to the left edge.

Explicit line past the grid generates implicit columns

Three explicit 60pt columns; the orange cell is placed on grid-column: 5, so implicit columns 4 and 5 are created and it no longer overlaps the blue auto-placed cell.

Auto tracks stop where the space runs out

The same two auto columns twice. Given room, each grows to its own max-content width; given a container narrower than both together, they share what there is instead of growing past it — the dashed outline is the container, and nothing may reach outside it.

Baseline item alignment

With align-items: baseline, the three differently-sized labels rest on a single shared text baseline.