> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Gap

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

export const GapSmallDemo = () => {
  const blockStyle = {
    background: "#2563eb",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.gap-4</span>
        <div className="tw-demo-gap" style={{
    display: "flex",
    gap: "1rem",
    flexWrap: "wrap"
  }}>
          <div style={blockStyle}>01</div>
          <div style={blockStyle}>02</div>
          <div style={blockStyle}>03</div>
          <div style={blockStyle}>04</div>
        </div>
      </div>
    </div>;
};

export const GapAxisDemo = () => {
  const blockStyle = {
    background: "#2563eb",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.gap-x-8 .gap-y-3</span>
        <div className="tw-demo-gap" style={{
    display: "flex",
    columnGap: "2rem",
    rowGap: "0.75rem",
    flexWrap: "wrap"
  }}>
          <div style={blockStyle}>01</div>
          <div style={blockStyle}>02</div>
          <div style={blockStyle}>03</div>
          <div style={blockStyle}>04</div>
        </div>
      </div>
    </div>;
};

export const GapLargeDemo = () => {
  const blockStyle = {
    background: "#2563eb",
    color: "#ffffff",
    borderRadius: "0.75rem",
    padding: "0.9rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 700,
    textAlign: "center",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.gap-14</span>
        <div className="tw-demo-gap" style={{
    display: "flex",
    gap: "3.5rem",
    flexWrap: "wrap"
  }}>
          <div style={blockStyle}>01</div>
          <div style={blockStyle}>02</div>
          <div style={blockStyle}>03</div>
          <div style={blockStyle}>04</div>
        </div>
      </div>
    </div>;
};

## 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.

<Tip>For fluid `clamp()` and breakpoints, see [Fluid scaling](/concepts/fluid-scaling).</Tip>

| 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`  |

<Info>
  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`).
</Info>

## 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.

<GapSmallDemo />

```html theme={null}
<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.

<GapAxisDemo />

```html theme={null}
<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.

<GapLargeDemo />

```html theme={null}
<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

<CardGroup cols={2}>
  <Card title="Margin" href="/spacing/margin">
    Control external spacing with margin utilities
  </Card>

  <Card title="Padding" href="/spacing/padding">
    Control internal spacing with padding utilities
  </Card>
</CardGroup>