Skip to main content

​
Overview

Gap adds space between flex items in the same container, so you do not need margins on every child to separate a row or wrapped grid. It only applies when the parent is a flex container (display: flex). Use gap-* when row and column spacing match, and gap-x-* / gap-y-* when they should differ; the table maps each suffix to rem/px.
For fluid clamp() and breakpoints, see Fluid scaling.
In real classes, * is empty for both axes (gap-4), x for column gap only (gap-x-8), or y for row gap only (gap-y-3).

​
Uniform Gap

gap-* applies the same spacing on both axes. This is the most common pattern for button groups, navigation rows, and simple card layouts.

​
Axis-Specific Gap

Use gap-x-* and gap-y-* when horizontal and vertical spacing need different values. This is useful for wrapped tag lists or grid-like card layouts where row spacing should be tighter than column spacing.

​
Large Gap

Larger gap values like gap-14 create generous breathing room between items. Use these for feature grids and hero sections where visual separation matters.

​
Gap vs Margin

​
When to Use Gap

  • Spacing between flex items
  • Tag lists and button groups
  • Card rows and wrapped content
  • Navigation items

​
When to Use Margin

  • Space outside an element
  • Section separation
  • Alignment helpers like margin-horizontal-auto
  • Negative spacing techniques

​
Best Practices

  • Use gap-* instead of margin for spacing between flex children.
  • Use the same gap value across related components to keep rhythm consistent.
  • Use gap-x-* and gap-y-* when wrapped rows need different horizontal and vertical spacing.
  • Keep gap decisions in the container so child components stay reusable.
  • Pair gap with .flex-wrap when rows may need to break naturally.

Margin

Control external spacing with margin utilities

Padding

Control internal spacing with padding utilities