Vue Gap Utilities

Overview

When using display: grid or display: flex, you can make use of gap utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the $spacers Sass map.

<div style="grid-template-columns: 1fr 1fr" class="d-grid gap-4">
  <div class="p-3">Grid item 1</div>
  <div class="p-3">Grid item 2</div>
  <div class="p-3">Grid item 3</div>
  <div class="p-3">Grid item 4</div>
</div>

Support includes responsive options for all of CoreUI’s grid breakpoints, as well as thirteen sizes from the $spacers map (0–12). There is no .gap-auto utility class as it’s effectively the same as .gap-0.

gap only applies inside a flex or grid container. On a plain block layout it does nothing — reach for space between there.

row-gap

row-gap sets the vertical space between children items in the specified container.

<div style="grid-template-columns: 1fr 1fr" class="d-grid gap-0 row-gap-4">
  <div class="p-3">Grid item 1</div>
  <div class="p-3">Grid item 2</div>
  <div class="p-3">Grid item 3</div>
  <div class="p-3">Grid item 4</div>
</div>

column-gap

column-gap sets the horizontal space between children items in the specified container.

<div style="grid-template-columns: 1fr 1fr" class="d-grid gap-0 column-gap-4">
  <div class="p-3">Grid item 1</div>
  <div class="p-3">Grid item 2</div>
  <div class="p-3">Grid item 3</div>
  <div class="p-3">Grid item 4</div>
</div>

Customizing

Sass variables

Gap utilities are generated from the $spacers map.

$spacer: 1rem !default;

$spacers: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: defaults(
  (
    0: 0,
    1: calc(var(--cui-spacer) * .25),
    2: calc(var(--cui-spacer) * .375),
    3: calc(var(--cui-spacer) * .5),
    4: calc(var(--cui-spacer) * .75),
    5: var(--cui-spacer),
    6: calc(var(--cui-spacer) * 1.25),
    7: calc(var(--cui-spacer) * 1.5),
    8: calc(var(--cui-spacer) * 1.75),
    9: calc(var(--cui-spacer) * 2),
    10: calc(var(--cui-spacer) * 2.25),
    11: calc(var(--cui-spacer) * 2.5),
    12: calc(var(--cui-spacer) * 3),
  ),
  $spacers
);

Gap utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

"gap": (
  responsive: true,
  property: gap,
  class: gap,
  values: $utilities-spacers
),
"row-gap": (
  responsive: true,
  property: row-gap,
  class: row-gap,
  values: $utilities-spacers
),
"column-gap": (
  responsive: true,
  property: column-gap,
  class: column-gap,
  values: $utilities-spacers
),