Gap Classes

Bellow is a Demonstration of How Gap Classes Work

Flexbox with gap: 0 (default)
No space between flex items (default behavior)
1
2
3
4
Flexbox with gap: 0.5rem (gap-2)
Small consistent space between all flex items
1
2
3
4
Flexbox with gap: 1rem (gap-4)
Medium consistent space between all flex items
1
2
3
4
Flexbox with gap: 2rem (gap-8)
Large consistent space between all flex items
1
2
3
4
Wrapped Flexbox with gap: 1rem (gap-4)
Consistent space between items and between rows
1
2
3
4
5
6
Grid with gap: 0 (default)
No space between grid items (default behavior)
1
2
3
4
5
6
Grid with gap: 0.5rem (gap-2)
Small consistent space between all grid items
1
2
3
4
5
6
Grid with gap: 1rem (gap-4)
Medium consistent space between all grid items
1
2
3
4
5
6
Grid with gap: 2rem (gap-8)
Large consistent space between all grid items
1
2
3
4
5
6
All Gap Sizes (0-12)
Visual comparison of all gap sizes from 0 to 3rem
gap-0:
1
2
gap-1:
1
2
gap-2:
1
2
gap-3:
1
2
gap-4:
1
2
gap-5:
1
2
gap-6:
1
2
gap-7:
1
2
gap-8:
1
2
gap-9:
1
2
gap-10:
1
2
gap-11:
1
2
gap-12:
1
2
Important Notes
  • gap creates consistent spacing between items in both flex and grid layouts
  • Replaces the need for margin hacks to space items
  • In flexbox, works with flex-wrap to create consistent row/column gaps
  • In grid, applies to both row and column gaps simultaneously
  • Values are in rem units (1rem = 16px by default)
  • For separate row/column gaps, use row-gap and column-gap