Gap

Set row and column gaps between items in a layout container.

Use gap on a grid or flex container to separate its items. It adds space between tracks or items without adding padding around the container.

Quick reference

Example class	Expected declarations
`gap-4`	`column-gap: 1rem; row-gap: 1rem;`
`gap-x-8`	`column-gap: 2rem;`
`gap-y-2`	`row-gap: 0.5rem;`
`gap-gutter`	`column-gap: var(--zw-spacing-gutter); row-gap: var(--zw-spacing-gutter);`
`gap-[18px]`	`column-gap: 18px; row-gap: 18px;`

Example setup

These examples explicitly use spacingUnit: "0.25rem", reset: "none", strict mode and no breakpoints. Numeric suffixes multiply that unit: gap-4 emits literal 1rem lengths. No Tailwind spacing scale or theme is inherited. wind-demo classes are authored demonstration scaffolding; their CSS is visible with each preview.

Examples in use

Space items evenly

Apply gap-4 to the container. Each tile uses p-2 for its own inner spacing.

Space items evenly

HTML

<div class="wind-demo grid grid-cols-3 gap-4">
  <div class="wind-demo-cell p-2">A</div>
  <div class="wind-demo-cell p-2">B</div>
  <div class="wind-demo-cell p-2">C</div>
  <div class="wind-demo-cell p-2">D</div>
  <div class="wind-demo-cell p-2">E</div>
  <div class="wind-demo-cell p-2">F</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-cell {
  background: #dce8f2;
  border: 1px solid #849bb3;
  min-width: 3rem;
  text-align: center;
}
.grid {
  display: grid;
}
.grid-cols-3 {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.p-2 {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.gap-4 {
  column-gap: 1rem;
  row-gap: 1rem;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-cell": true
    },
    "safelist": {
      "docs-preview": [
        "grid",
        "grid-cols-3",
        "gap-4",
        "p-2"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-cell { background: #dce8f2; border: 1px solid #849bb3; min-width: 3rem; text-align: center; }

Separate row and column spacing

Use gap-x-8 for 2rem between columns and gap-y-2 for 0.5rem between rows.

Separate row and column spacing

HTML

<div class="wind-demo grid grid-cols-3 gap-x-8 gap-y-2">
  <div class="wind-demo-cell p-2">A</div>
  <div class="wind-demo-cell p-2">B</div>
  <div class="wind-demo-cell p-2">C</div>
  <div class="wind-demo-cell p-2">D</div>
  <div class="wind-demo-cell p-2">E</div>
  <div class="wind-demo-cell p-2">F</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-cell {
  background: #dce8f2;
  border: 1px solid #849bb3;
  min-width: 3rem;
  text-align: center;
}
.grid {
  display: grid;
}
.grid-cols-3 {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.p-2 {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.gap-x-8 {
  column-gap: 2rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-cell": true
    },
    "safelist": {
      "docs-preview": [
        "grid",
        "grid-cols-3",
        "gap-x-8",
        "gap-y-2",
        "p-2"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-cell { background: #dce8f2; border: 1px solid #849bb3; min-width: 3rem; text-align: center; }

Name a reusable gap

The example explicitly configures tokens.spacing.gutter to 1.5rem.

Name a reusable gap

HTML

<div class="wind-demo grid grid-cols-3 gap-gutter">
  <div class="wind-demo-cell p-2">A</div>
  <div class="wind-demo-cell p-2">B</div>
  <div class="wind-demo-cell p-2">C</div>
  <div class="wind-demo-cell p-2">D</div>
  <div class="wind-demo-cell p-2">E</div>
  <div class="wind-demo-cell p-2">F</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-gutter: 1.5rem;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-cell {
  background: #dce8f2;
  border: 1px solid #849bb3;
  min-width: 3rem;
  text-align: center;
}
.grid {
  display: grid;
}
.grid-cols-3 {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.p-2 {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.gap-gutter {
  column-gap: var(--zw-spacing-gutter);
  row-gap: var(--zw-spacing-gutter);
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "spacing": {
        "gutter": "1.5rem"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-cell": true
    },
    "safelist": {
      "docs-preview": [
        "grid",
        "grid-cols-3",
        "gap-gutter",
        "p-2"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-cell { background: #dce8f2; border: 1px solid #849bb3; min-width: 3rem; text-align: center; }

Use a one-off length

gap-[18px] emits 18px for both gap properties.

Use a one-off length

HTML

<div class="wind-demo grid grid-cols-3 gap-[18px]">
  <div class="wind-demo-cell p-2">A</div>
  <div class="wind-demo-cell p-2">B</div>
  <div class="wind-demo-cell p-2">C</div>
  <div class="wind-demo-cell p-2">D</div>
  <div class="wind-demo-cell p-2">E</div>
  <div class="wind-demo-cell p-2">F</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-cell {
  background: #dce8f2;
  border: 1px solid #849bb3;
  min-width: 3rem;
  text-align: center;
}
.grid {
  display: grid;
}
.grid-cols-3 {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.p-2 {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.gap-\[18px\] {
  column-gap: 18px;
  row-gap: 18px;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-cell": true
    },
    "safelist": {
      "docs-preview": [
        "grid",
        "grid-cols-3",
        "gap-[18px]",
        "p-2"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-cell { background: #dce8f2; border: 1px solid #849bb3; min-width: 3rem; text-align: center; }

Custom and named values

gap-0 removes gaps and gap-px uses 1px without a spacing token. Other numeric suffixes need tokens.spacingUnit. Named spacing values need tokens.spacing, as the gutter example shows; arbitrary values such as gap-[18px] do not need that scale. Gap values cannot be negative. Use underscore encoding for spaces in arbitrary calc values. gap-x sets column-gap and gap-y sets row-gap; in flex layouts, how these affect item and line spacing follows the flex direction.

Related guides: Utility grammar · Variants

Catalog details

gap

Field	Value
Catalog identifier	`v1.gap`
Class pattern	`gap-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"column-gap","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	`spacing`
Negative-value policy	`forbidden`
Conflict group and rank	`gap` (`11`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`column-gap`, `row-gap`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`column-gap`	`resolved`	`null`
`row-gap`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`gap-0`	`column-gap: 0`; `row-gap: 0`

gap-x

Field	Value
Catalog identifier	`v1.gap-x`
Class pattern	`gap-x-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"column-gap","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	`spacing`
Negative-value policy	`forbidden`
Conflict group and rank	`gap` (`11`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`column-gap`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`column-gap`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`gap-x-0`	`column-gap: 0`

gap-y

Field	Value
Catalog identifier	`v1.gap-y`
Class pattern	`gap-y-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"column-gap","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	`spacing`
Negative-value policy	`forbidden`
Conflict group and rank	`gap` (`11`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`row-gap`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`row-gap`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`gap-y-0`	`row-gap: 0`

Gap

Quick reference

Examples in use

Space items evenly

Separate row and column spacing

Name a reusable gap

Use a one-off length

Custom and named values

gap

Accepted values

Declaration templates

Catalog examples

gap-x

Accepted values

Declaration templates

Catalog examples

gap-y

Accepted values

Declaration templates

Catalog examples

Revision History