Visit Pixel Rocket

Gaps - Finish

See how the gap property creates consistent spacing between flex items. Much cleaner than using margins and automatically handles spacing in all directions.

See Start Next: Shorthand Properties

No Gap (default)

Item 1
Item 2
Item 3
Item 4

Items are flush against each other with no spacing

gap: 1rem

Item 1
Item 2
Item 3
Item 4

Consistent 1rem spacing between all items

gap: 2rem

Item 1
Item 2
Item 3
Item 4

Larger 2rem spacing creates more breathing room

Different row and column gaps

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

row-gap: 0.5rem; column-gap: 2rem for different spacing

Gap with wrapping

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Gap works perfectly with flex-wrap for responsive grids

Real-world example: Card grid

Card 1

Clean spacing without manual margins

Card 2

Gap property handles all the spacing

Card 3

Perfect for responsive card layouts

Card 4

No margin calculations needed

Consistent spacing between cards without margin calculations

Key Takeaways

  • gap creates consistent spacing between flex items automatically
  • Gap Properties:
    • gap: 1rem - Same spacing in both directions
    • row-gap: 0.5rem - Vertical spacing only
    • column-gap: 1rem - Horizontal spacing only
    • gap: 1rem 2rem - Shorthand for row-gap column-gap
  • Advantages over margins:
    • No spacing at container edges
    • Automatic spacing between items only
    • Works perfectly with flex-wrap
    • No need for :first-child or :last-child selectors
  • Perfect for card grids, navigation menus, and button groups
  • Modern browser support - use for clean, maintainable layouts