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

# Gap Utilities for Flex Container Spacing in Elementor

> Space flex children in Elementor using AtomicKit's gap, gap-x, and gap-y utilities — uniform or axis-specific spacing without adding margins to children.

Gap is the preferred way to space flex children in AtomicKit — it applies spacing at the container level so children stay reusable and don't carry layout-specific margins wherever they go. Use `gap-*` for uniform spacing in both directions, and reach for `gap-x-*` or `gap-y-*` when horizontal and vertical spacing should differ — a common need in wrapping tag lists and card grids.

## Gap value scale

AtomicKit's gap utilities follow a consistent spacing scale shared across the framework. Every value maps to a `rem` unit with a pixel equivalent for reference:

| Class                                 | Value     | Pixels |
| ------------------------------------- | --------- | ------ |
| `.gap-0` / `.gap-x-0` / `.gap-y-0`    | `0`       | 0px    |
| `.gap-px` / `.gap-x-px` / `.gap-y-px` | `1px`     | 1px    |
| `.gap-1` / `.gap-x-1` / `.gap-y-1`    | `0.25rem` | 4px    |
| `.gap-2` / `.gap-x-2` / `.gap-y-2`    | `0.5rem`  | 8px    |
| `.gap-3` / `.gap-x-3` / `.gap-y-3`    | `0.75rem` | 12px   |
| `.gap-4` / `.gap-x-4` / `.gap-y-4`    | `1rem`    | 16px   |
| `.gap-6` / `.gap-x-6` / `.gap-y-6`    | `1.5rem`  | 24px   |
| `.gap-8` / `.gap-x-8` / `.gap-y-8`    | `2rem`    | 32px   |
| `.gap-12` / `.gap-x-12` / `.gap-y-12` | `3rem`    | 48px   |
| `.gap-14` / `.gap-x-14` / `.gap-y-14` | `3.5rem`  | 56px   |

<Info>
  The three gap families share the same value steps: `gap-*` sets both axes at once, `gap-x-*` sets only the column (horizontal) gap, and `gap-y-*` sets only the row (vertical) gap. You can combine all three on the same element — `gap-x-*` and `gap-y-*` will override the corresponding axis set by `gap-*`.
</Info>

## Uniform gap — button group

When spacing should be identical in all directions, `gap-*` is the simplest choice. A typical button group uses `gap-3` or `gap-4` to keep actions close together without crowding:

```html theme={null}
<div class="flex gap-4">
  <button>Save draft</button>
  <button>Publish</button>
  <button>Preview</button>
</div>
```

For a vertically stacked group, the same class works with `.flex-col`:

```html theme={null}
<div class="flex flex-col gap-4">
  <button>Option A</button>
  <button>Option B</button>
  <button>Option C</button>
</div>
```

## Axis-specific gap — tag list

When a flex container wraps onto multiple lines, you often want more vertical breathing room between rows than horizontal space between items. Combine `gap-x-*` and `gap-y-*` to dial in each axis independently:

```html theme={null}
<!-- More horizontal space between tags, less vertical space between rows -->
<div class="flex flex-wrap gap-x-6 gap-y-4">
  <span class="tag">Design</span>
  <span class="tag">Development</span>
  <span class="tag">Strategy</span>
  <span class="tag">Branding</span>
  <span class="tag">Motion</span>
  <span class="tag">Copywriting</span>
  <span class="tag">Research</span>
</div>
```

The same pattern works for card grids where column gutters and row gutters follow different spacing rules from your design system:

```html theme={null}
<div class="flex flex-wrap gap-x-6 gap-y-8">
  <div class="basis-1-3">Card one</div>
  <div class="basis-1-3">Card two</div>
  <div class="basis-1-3">Card three</div>
  <div class="basis-1-3">Card four</div>
  <div class="basis-1-3">Card five</div>
  <div class="basis-1-3">Card six</div>
</div>
```

## Gap vs margin

Both gap and margin can create visual space between elements, but they serve different purposes. Choosing the right one keeps your markup clean and your components portable.

<CardGroup cols={2}>
  <Card title="Use gap when…" icon="check">
    * Spacing children inside a flex container you control
    * All children in the row or column need the same spacing
    * Children are reusable components that shouldn't carry layout-specific styles
    * You want spacing to disappear automatically at the container's edges
  </Card>

  <Card title="Use margin when…" icon="check">
    * Adding space between a component and unrelated siblings outside a flex parent
    * Pushing one specific child away from others in a non-flex context
    * Applying asymmetric offset to a single item (e.g. `margin-top` on a section heading)
    * Working with elements in a block or inline flow rather than a flex container
  </Card>
</CardGroup>

<Warning>
  Avoid adding `margin` to flex children as a substitute for `gap` — it makes components harder to reuse because they carry spacing assumptions about their parent layout. Define spacing at the container level with `gap-*` instead.
</Warning>

## Responsive variants

Gap utilities support the `--on-*` responsive suffix. Increase or decrease spacing at specific breakpoints to match the visual density appropriate for each screen size:

```html theme={null}
<!-- Tight gap on mobile, wider gap on medium screens and up -->
<div class="flex flex-wrap gap-3 gap-6--on-m gap-8--on-l">
  <div class="basis-full basis-1-3--on-m">Card one</div>
  <div class="basis-full basis-1-3--on-m">Card two</div>
  <div class="basis-full basis-1-3--on-m">Card three</div>
</div>
```

You can also apply responsive axis-specific overrides. A layout that starts with uniform gap on mobile could switch to separate horizontal and vertical values on larger screens:

```html theme={null}
<div class="flex flex-wrap gap-4 gap-x-8--on-l gap-y-6--on-l">
  <!-- items -->
</div>
```

<Info>
  Responsive suffixes are mobile-first: `--on-s`, `--on-m`, `--on-l`, `--on-xl`. A class without a suffix applies at all viewport sizes.
</Info>

## Best practices

<CardGroup cols={2}>
  <Card title="Start with gap-4 as your baseline" icon="ruler">
    `gap-4` (1rem / 16px) is a comfortable default for most UI components. Step up to `gap-6` or `gap-8` for section-level spacing and down to `gap-2` or `gap-3` for compact controls.
  </Card>

  <Card title="Don't combine gap and child margins for the same axis" icon="ban">
    If you set `gap-x-6` on a container and also add `margin-right` to every child, the spacing will compound unpredictably. Pick one approach per axis and stay consistent.
  </Card>

  <Card title="Use gap-0 to reset inherited spacing" icon="eraser">
    If a parent's gap is leaking into a nested flex container, add `gap-0` to the child container to reset it before applying the spacing you actually want.
  </Card>

  <Card title="Match gap values to your spacing scale" icon="layer-group">
    AtomicKit's gap scale is shared with padding and margin utilities. Using the same values across all spacing properties keeps your vertical rhythm consistent without extra thought.
  </Card>
</CardGroup>

## Related pages

<CardGroup cols={2}>
  <Card title="Flex Container" href="/flexbox/flex" icon="box">
    Set up block and inline flex containers
  </Card>

  <Card title="Direction & Wrap" href="/flexbox/direction" icon="arrows-up-down">
    Control which direction gap spacing is applied along
  </Card>
</CardGroup>