<

Voyager
Voyager

Gap

The gap property can be used to set the distance/spacing between objects within the context of a grid or flex element.

Usage

Voyager uses the $spacing scale to define the gap sizes

Class Size
.gap-0 0
.gap-1 4px
.gap-2 8px
.gap-3 16px
.gap-4 24px
.gap-5 40px

Use gap to set uniform gaps (gutters) between rows and columns of content without the need to know the number of children an element has.

1
2
3
4
5
6
HTML Copy 

<div class="d-flex flex-wrap gap-3">
    <div class="qw-gray-2 p-5">1</div>
    <div class="qw-gray-2 p-5">2</div>
    <div class="qw-gray-2 p-5">3</div>
    <div class="qw-gray-2 p-5">4</div>
    <div class="qw-gray-2 p-5">5</div>
    <div class="qw-gray-2 p-5">6</div>
</div>

Column and Row Gap

The gap property can be assigned only to rows or columns as well. Use .gap-row-* or .gap-column-* to set the gap property for the child rows and column of an element, respectively.

1
2
3
4
5
6
HTML Copy 

<div class="d-flex flex-wrap gap-row-2 gap-column-5">
    <div class="qw-gray-2 p-5">1</div>
    <div class="qw-gray-2 p-5">2</div>
    <div class="qw-gray-2 p-5">3</div>
    <div class="qw-gray-2 p-5">4</div>
    <div class="qw-gray-2 p-5">5</div>
    <div class="qw-gray-2 p-5">6</div>
</div>

Responsive rules

Base gap utilities apply to all screen sizes, from xs to xl, unless they have a specified breakpoint defined within them. Breakpoints apply to the specified screensize and up.

The class is constructed from the combination of the type, breakpoint, min/max(optional), and size. Example: .gap-sm-2 applies .gap-2 at the small breakpoint and above.

1
2
3
4
5
HTML

<div class="d-flex flex-wrap gap-xs-1 gap-sm-2 gap-md-3 gap-lg-4 gap-xl-5">
    <div class="qw-gray-2 p-5">1</div>
    <div class="qw-gray-2 p-5">2</div>
    <div class="qw-gray-2 p-5">3</div>
    <div class="qw-gray-2 p-5">4</div>
    <div class="qw-gray-2 p-5">5</div>
</div>