Gosub grid (advanced) test

Beyond the basics: fr units, minmax, auto-fit/fill, spanning, named template areas, auto-flow: dense, alignment, and named lines.

fr units & repeat()

1fr 2fr 1fr — middle column takes twice the free space.

1fr
2fr
1fr

repeat(4, 1fr)

1
2
3
4

auto-fit vs auto-fill (resize the window)

repeat(auto-fit, minmax(120px, 1fr)) — tracks stretch to fill the row.

A
B
C
D

repeat(auto-fill, minmax(120px, 1fr)) — empty tracks are kept, items don't stretch to fill them.

A
B
C
D

Spanning columns & rows

col 1 / 3
col 3 / 5,
row 1 / 3
x
x
span 3

Named template areas (holy-grail layout)

header
side
main
footer

auto-flow: dense (backfills gaps)

wide
tall
1
2
3
wide
4
5

Alignment (justify/align items & content)

1
2
3
4
5
6

Named grid lines

start → mid
mid → end