Gutter

Learn about the gutter special utility.

About Gutter

The gutter utility applies margin-based horizontal or vertical spacing of child elements using the Lobotomized Owl selector technique. This utility is useful in situations where you need to quickly apply equal spacing between child elements.

Important the gutter special utility will most likely be reduced in range limit once flexbox gap becomes more widely supported by browsers.

Basic Usage

To apply gutter, assign the class gutter-x-<size> or gutter-y-<size> to any parent element.

1
2
3
4
<div class="gutter-x-20">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
.gutter-x-20 > * + * {
  --gutter-right: 0;
  --gutter-left: 1;
  margin: 0 calc(1.25rem * var(--gutter-right)) 0 calc(1.25rem * var(--gutter-left));
}

Gutter Reverse

You can reverse direction of the margin that is applied by assigning the gutter-reverse utility, this can be useful in situations where flex-row-reverse or flex-col-reverse is applied.

1
2
3
4
<div class="flex flex-row-reverse gutter-x-20 gutter-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Disabling Gutter

To disable this special utility, simply pass in the gutter properties to the excludes setting in your configuration.

@use "uniform" as * with (
  $config: (
    excludes: (
      gutter-x,
      gutter-y,
      gutter-reverse,     
    )
  )
);