Gap

Quick reference

gap sets the space between items inside a flex or grid container. It only takes effect on flex and grid parents. It has no effect on block-level layouts.

Examples

Inside a flex container

<div class="flex gap-md">
  <span>Item</span>
  <span>Item</span>
  <span>Item</span>
</div>

Items are spaced by --gap-md (1.5rem). The gap applies to both row and column directions when items wrap.

Inside a grid container

<div class="grid grid-cols-3 gap-lg">
  <div>Cell</div>
  <div>Cell</div>
  <div>Cell</div>
  <div>Cell</div>
  <div>Cell</div>
  <div>Cell</div>
</div>

Stacking with flex-col

A common pattern for vertical rhythm:

<div class="flex flex-col gap-md">
  <h2>Section heading</h2>
  <p>Body copy.</p>
  <p>More body.</p>
</div>

gap on a flex column replaces top-margin patterns. Each item sits exactly --gap-md below the previous one. No margin collapse, no last-child overrides.

Spacing scale

Same scale as Padding and Margin. The five semantic gap tokens.

The default semantic gaps are intentionally non-linear (2, 4, 6, 11, 24) to match how spacing perception falls off. The larger the gap, the more visible difference each step needs to make.

Different row and column gaps

Zazz doesn't ship separate row-gap / column-gap utilities. When you need them, write the property directly:

.split-grid {
  display: grid;
  column-gap: var(--gap-md);
  row-gap: var(--gap-sm);
}

Using a custom value

For finer control between the semantic sizes, reach for step tokens:

.tight-row {
  gap: var(--step-3); /* 0.75rem */
}

Customizing the scale

gap-* consumes the same --gap-* tokens as padding and margin. Override one token and every utility that references it follows. See Padding → Customizing the scale.