Gap

Add gap between flex/grid items

Syntax

space="g:[value]" or space="g-{axis}:[value]"

Values

Property	CSS Output	Description
g	gap: var(--s-{value})	All gaps
g-x	column-gap: var(--s-{value})	Column gap
g-y	row-gap: var(--s-{value})	Row gap

Scale Values

none, tiny, small, medium, big, giant, vast

Examples

<div layout="flex" space="g:medium">Gap between items</div>
<div layout="grid" space="g-x:big g-y:small">Grid gaps</div>

Preview

Flex Gap

space="g:medium" - Space between flex items

123

View Code

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span space="p:small" visual="bg:primary text:white rounded:small">1</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">2</span>
  <span space="p:small" visual="bg:primary text:white rounded:small">3</span>
</div>

Grid Gap

space="g:small" - Space between grid items

123456

View Code

<div layout="grid grid-cols:3" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">1</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">2</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">3</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">4</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">5</span>
  <span space="p:small" visual="bg:primary text:white rounded:small" layout="text:center">6</span>
</div>

Arbitrary Values

Supports custom values using bracket syntax:

<div space="gap:[custom-value]">Custom</div>

Notes

TIP

Tailwind Scale Support

Use tw- prefix to access Tailwind numeric scale: g:tw-4 (1rem), g:tw-8 (2rem)

Reference