grid, part 1 — tracks and placement (grid2.html = alignment and gaps)

grid-template-columns

60px 120px 60px

fixed tracks
a
b
c

display: inline-grid

shrink-to-fit = 120
abafter

1fr 2fr

80 / 160
a
b

25% 75%

60 / 180
a
b

auto 1fr

auto = content 50, then 190
b

repeat(3, 1fr)

80 / 80 / 80
a
b
c

minmax(150px,1fr) 1fr

the min wins: 150 / 90
a
b

min-content max-content

two 50px chips: 50 / 100

repeat(auto-fill, 60px)

4 tracks, e wraps
a
b
c
d
e

repeat(auto-fit, minmax(60px,1fr))

empties collapse: 120/120
a
b

rows, implicit tracks, auto-flow

grid-template-rows: 30px 50px

y 0 / 30, h 30 / 50
a
b

grid-auto-rows: 40px

explicit 20, then 40s
a
b
c

auto-flow column + auto-columns 70px

0 / 70 / 140
a
b
c

grid-auto-flow: column

fills down, then across
a
b
c

auto-flow: row (sparse)

c lands after b
a
b
c

auto-flow: row dense

c backfills row 1 col 1
a
b
c

grid-column / grid-row / grid-area

grid-column: 1 / 3

b spans two 80px tracks
a
b

grid-column: span 2

b starts at col 2
a
b

grid-column: 1 / -1

b takes the whole row
a
b

grid-row: 1 / 3

a is 40 tall
a
b

grid-area: 1 / 2 / 3 / 4

x 80, w 160, h 40
a

named areas, named lines, shorthands

grid-template-areas

"hd hd" / "sb mn"
hd
sb
mn

named lines: mid / e

a sits in track 2
a

grid-template: rows / cols

30px 50px / 100px 140px
a
b
c

grid: auto-flow 40px / 1fr 1fr

rows 40, cols 120
a
b
c
running...