Gap

Use gap utilities to control spacing between children inside Flexbox and Grid layouts. They create consistent internal rhythm without adding margins to each item manually.

Gap utilities are powered by FrontAlign spacing tokens, so the same scale works across navigation, button groups, forms, card grids and responsive page sections.

Quick reference

Spacing scale

The numeric gap scale maps directly to FrontAlign spacing tokens.

Because the scale uses design tokens, project-level spacing can be adjusted from the theme layer without rewriting layout markup.

Usage

Gap utilities work on Flexbox and Grid containers.

<div class="is-flex gap-3">
  <button class="button is-light">Cancel</button>
  <button class="button is-primary">Save</button>
</div>

<div class="is-grid grid-cols-3 gap-4">
  <article>Card</article>
  <article>Card</article>
  <article>Card</article>
</div>

Gap sets spacing between children only. It does not add outer spacing around the container.

Equal spacing

Use gap-* when row and column spacing should be the same.

<div class="is-grid grid-cols-3 gap-4">
  <article>Card</article>
  <article>Card</article>
  <article>Card</article>
</div>

Column spacing

Use gap-x-* when horizontal spacing needs to be different from vertical spacing.

<div class="is-grid grid-cols-3 gap-x-5 gap-y-2">
  <article>Card</article>
  <article>Card</article>
  <article>Card</article>
  <article>Card</article>
  <article>Card</article>
  <article>Card</article>
</div>

Row spacing

Use gap-y-* for vertical rhythm in stacked layouts such as forms.

<form class="is-grid gap-y-3">
  <input class="form-control" placeholder="Name">
  <input class="form-control" placeholder="Email">
  <button class="button is-primary">Submit</button>
</form>

Feature grid

Use a larger gap for section-level layouts.

<section class="is-grid grid-cols-1 md:grid-cols-3 gap-4">
  <article>Design tokens</article>
  <article>Runtime behavior</article>
  <article>Compiler engine</article>
</section>

Split layout

Use different horizontal and vertical gaps when a layout wraps.

<section class="is-grid grid-cols-1 lg:grid-cols-2 gap-y-4 gap-x-6">
  <div>Content</div>
  <div>Preview</div>
</section>

Responsive

Gap utilities include responsive variants for sm, md, lg, and xl breakpoints.

Responsive variants are mobile-first. A base gap applies immediately; a prefixed gap applies from its breakpoint and above.

<section class="is-grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 lg:gap-5">
  <article>Card</article>
  <article>Card</article>
  <article>Card</article>
</section>

Gap vs margin

Gap is usually better than margin when spacing children inside a Flexbox or Grid container.

Gap avoids edge-margin cleanup because it only applies between items.

Usage notes

• Use gap-* for equal row and column spacing.
• Use gap-x-* for column spacing only.
• Use gap-y-* for row spacing only.
• Gap utilities work best with is-flex, is-inline-flex, and is-grid.
• Use margin utilities when the spacing belongs outside a standalone element.
• Responsive variants follow FrontAlign's mobile-first breakpoint system.