Gap

Use the spacing scale to set gaps between rows, columns, or both.

Sass mixins

Mixin	CSS properties
gap($key)	gap
gap-x($key)	column-gap
gap-y($key)	row-gap

Responsive range mixins

Pass a base size followed by named breakpoint overrides, such as crayon.gap-range(2, $md: 4, $lg: 8).

Mixin	Purpose
gap-range($base, $breakpoint-range...)	Responsive row and column gap
gap-x-range($base, $breakpoint-range...)	Responsive column gap
gap-y-range($base, $breakpoint-range...)	Responsive row gap

Utility classes

Class	Property
gap-{size}	gap: {size}
gap-x-{size}	column-gap: {size}
gap-y-{size}	row-gap: {size}

Examples

Sass mixins

scss

.grid {
  @include crayon.gap(4);
  @include crayon.gap-x(8);
}

sass

.grid
  +crayon.gap(4)
  +crayon.gap-x(8)

Utility classes

<div class="grid gap-4">Row and column gap</div>
<div class="grid gap-x-8 gap-y-4">Different column and row gaps</div>

Sass functions

scss

.grid {
  gap: crayon.size(4);
}

sass

.grid
  gap: crayon.size(4)

CSS variables

.grid {
  gap: var(--size-4);
}