grid, part 2 — gaps and alignment (grid1.html = tracks and placement)

gap / row-gap / column-gap

column-gap: 20px

110 / 110, b at 130
a
b

row-gap: 12px

row 2 at y = 32
a
b
c

gap: 8px 16px

cols 112, row 2 at y = 28
a
b
c

column-gap: 10%

24px gap, cols 108
a
b

justify-items / align-items / place-items

justify-items: start

0 / 120
a
b

justify-items: end

60 / 180
a
b

justify-items: center

30 / 150
a
b

justify-items: stretch

auto width fills 120
a
b

align-items: start

y = 0 in a 60px row
a

align-items: end

y = 40
a

align-items: center

y = 20
a

align-items: stretch

h = 60
a

place-items: center

x = 90, y = 20
a

justify-content (tracks 3 x 60 in 240)

justify-content: start

0 / 60 / 120
a
b
c

justify-content: end

60 / 120 / 180
a
b
c

justify-content: center

30 / 90 / 150
a
b
c

justify-content: space-between

0 / 90 / 180
a
b
c

justify-content: space-around

10 / 90 / 170
a
b
c

justify-content: space-evenly

15 / 90 / 165
a
b
c

align-content (rows 2 x 20 in h=120)

align-content: start

0 / 20
a
b

align-content: end

80 / 100
a
b

align-content: center

40 / 60
a
b

align-content: space-between

0 / 100
a
b

align-content: space-around

20 / 80
a
b

align-content: space-evenly

26.7 / 73.3
a
b

align-content: stretch

auto rows grow to 60
a
b

place-content: center

x = 30, y = 20
a
b
c

justify-self / align-self / place-self

justify-self: end

x = 180, y stays 0
a

align-self: end

y = 40, x stays 0
a

place-self: center

x = 90, y = 20
a

justify/align-self: stretch

240 x 60
a

auto margins, order, nesting, spans

auto margins in a track

a right, b centred
a
b

order in auto placement

b c a across 80px cols
a
b
c

nested grid

2 x (2 x 60)
a
b
c
d

span 2 + justify-self: center

60 wide, x = 50
a
b
running...