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.
PatternValue
gap-*-00 / 0px
gap-*-px1px
gap-*-10.25rem / 4px
gap-*-20.5rem / 8px
gap-*-30.75rem / 12px
gap-*-41rem / 16px
gap-*-61.5rem / 24px
gap-*-82rem / 32px
gap-*-123rem / 48px
gap-*-143.5rem / 56px
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. 
<div class="elementor-element flex gap-4">
  <div class="padding-3 background-primary text-white rounded">
    Item 1
  </div>
  <div class="padding-3 background-success text-white rounded">
    Item 2
  </div>
  <div class="padding-3 background-error text-white rounded">
    Item 3
  </div>
</div>

​
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. 
<div class="elementor-element flex flex-wrap gap-x-6 gap-y-4">
  <span class="padding-horizontal-3 padding-vertical-1 background-gray-light rounded-full">
    Design
  </span>
  <span class="padding-horizontal-3 padding-vertical-1 background-gray-light rounded-full">
    Systems
  </span>
  <span class="padding-horizontal-3 padding-vertical-1 background-gray-light rounded-full">
    Layout
  </span>
  <span class="padding-horizontal-3 padding-vertical-1 background-gray-light rounded-full">
    Docs
  </span>
</div>

​
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. 
<div class="elementor-element flex gap-14 flex-wrap">
  <div class="card padding-6">
    Feature 1
  </div>
  <div class="card padding-6">
    Feature 2
  </div>
  <div class="card padding-6">
    Feature 3
  </div>
</div>

​
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