Flexbox: gap, row-gap, column-gap

Now each example visually highlights what is changing 👇

Uniform gap (16px)

Same space in all directions
1
2
3
4
5
6

More space between rows than columns

row-gap 24px | column-gap 6px
1
2
3
4
5
6

Widely separated rows

Vertical space is emphasized
1
2
3
4
5
6

Widely separated columns

Horizontal space is emphasized
1
2
3
4
5
6

No separation

gap: 0
1
2
3
4
5
6

Column direction + gap

Now the gap acts vertically
A
B
C