Skip to main content
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:
ClassValuePixels
.gap-0 / .gap-x-0 / .gap-y-000px
.gap-px / .gap-x-px / .gap-y-px1px1px
.gap-1 / .gap-x-1 / .gap-y-10.25rem4px
.gap-2 / .gap-x-2 / .gap-y-20.5rem8px
.gap-3 / .gap-x-3 / .gap-y-30.75rem12px
.gap-4 / .gap-x-4 / .gap-y-41rem16px
.gap-6 / .gap-x-6 / .gap-y-61.5rem24px
.gap-8 / .gap-x-8 / .gap-y-82rem32px
.gap-12 / .gap-x-12 / .gap-y-123rem48px
.gap-14 / .gap-x-14 / .gap-y-143.5rem56px
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-*.

​
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: 
<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: 
<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: 
<!-- 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: 
<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.

Use gap when…

  • 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

Use margin when…

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

​
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: 
<!-- 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: 
<div class="flex flex-wrap gap-4 gap-x-8--on-l gap-y-6--on-l">
  <!-- items -->
</div>
Responsive suffixes are mobile-first: --on-s, --on-m, --on-l, --on-xl. A class without a suffix applies at all viewport sizes.

​
Best practices

Start with gap-4 as your baseline

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.

Don't combine gap and child margins for the same axis

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.

Use gap-0 to reset inherited spacing

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.

Match gap values to your spacing scale

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.

​
Related pages

Flex Container

Set up block and inline flex containers

Direction & Wrap

Control which direction gap spacing is applied along