Gap

Control flex spacing with the bundled gap-*, gap-x-*, and gap-y-* utilities.

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.

Pattern	Value
gap-*-0	0 / 0px
gap-*-px	1px
gap-*-1	0.25rem / 4px
gap-*-2	0.5rem / 8px
gap-*-3	0.75rem / 12px
gap-*-4	1rem / 16px
gap-*-6	1.5rem / 24px
gap-*-8	2rem / 32px
gap-*-12	3rem / 48px
gap-*-14	3.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.

Related Utilities

Margin

Control external spacing with margin utilities

Padding

Control internal spacing with padding utilities