Cirrus

#Gap

Updated
0.7.2

Define gutters between Flexbox and Grid items.

ClassStyles
u-gap-px
gap: 1px !important
u-col-gap-px
column-gap: 1px !important
u-row-gap-px
row-gap: 1px !important
u-gap-0
gap: calc([space-size] * 0) !important
u-gap-1
gap: calc([space-size] * 1) !important
u-gap-2
gap: calc([space-size] * 2) !important
u-gap-3
gap: calc([space-size] * 3) !important
u-gap-4
gap: calc([space-size] * 4) !important
u-gap-5
gap: calc([space-size] * 5) !important
u-gap-6
gap: calc([space-size] * 6) !important
u-gap-8
gap: calc([space-size] * 8) !important
u-gap-10
gap: calc([space-size] * 10) !important
u-gap-12
gap: calc([space-size] * 12) !important
u-gap-16
gap: calc([space-size] * 16) !important
u-gap-20
gap: calc([space-size] * 20) !important
u-gap-24
gap: calc([space-size] * 24) !important
u-gap-32
gap: calc([space-size] * 32) !important
u-gap-48
gap: calc([space-size] * 48) !important
u-gap-64
gap: calc([space-size] * 64) !important
u-col-gap-0
column-gap: calc([space-size] * 0) !important
u-col-gap-1
column-gap: calc([space-size] * 1) !important
u-col-gap-2
column-gap: calc([space-size] * 2) !important
u-col-gap-3
column-gap: calc([space-size] * 3) !important
u-col-gap-4
column-gap: calc([space-size] * 4) !important
u-col-gap-5
column-gap: calc([space-size] * 5) !important
u-col-gap-6
column-gap: calc([space-size] * 6) !important
u-col-gap-8
column-gap: calc([space-size] * 8) !important
u-col-gap-10
column-gap: calc([space-size] * 10) !important
u-col-gap-12
column-gap: calc([space-size] * 12) !important
u-col-gap-16
column-gap: calc([space-size] * 16) !important
u-col-gap-20
column-gap: calc([space-size] * 20) !important
u-col-gap-24
column-gap: calc([space-size] * 24) !important
u-col-gap-32
column-gap: calc([space-size] * 32) !important
u-col-gap-48
column-gap: calc([space-size] * 48) !important
u-col-gap-64
column-gap: calc([space-size] * 64) !important
u-row-gap-0
row-gap: calc([space-size] * 0) !important
u-row-gap-1
row-gap: calc([space-size] * 1) !important
u-row-gap-2
row-gap: calc([space-size] * 2) !important
u-row-gap-3
row-gap: calc([space-size] * 3) !important
u-row-gap-4
row-gap: calc([space-size] * 4) !important
u-row-gap-5
row-gap: calc([space-size] * 5) !important
u-row-gap-6
row-gap: calc([space-size] * 6) !important
u-row-gap-8
row-gap: calc([space-size] * 8) !important
u-row-gap-10
row-gap: calc([space-size] * 10) !important
u-row-gap-12
row-gap: calc([space-size] * 12) !important
u-row-gap-16
row-gap: calc([space-size] * 16) !important
u-row-gap-20
row-gap: calc([space-size] * 20) !important
u-row-gap-24
row-gap: calc([space-size] * 24) !important
u-row-gap-32
row-gap: calc([space-size] * 32) !important
u-row-gap-48
row-gap: calc([space-size] * 48) !important
u-row-gap-64
row-gap: calc([space-size] * 64) !important

#Examples

Use u-gap-[size] to change the gap between rows and columns in both flexbox and grid layouts.

Learn more about Cirrus's sizing system to see what values can be used for u-gap-[size].

1
2
3
4
<div class="p-2 u-round-sm bg-indigo-100 u-flex u-gap-4 text-white font-bold u-text-center">
    <div class="p-4 u-round-sm w-100p bg-indigo-500">1</div>
    <div class="p-4 u-round-sm w-100p bg-indigo-500">2</div>
    <div class="p-4 u-round-sm w-100p bg-indigo-500">3</div>
    <div class="p-4 u-round-sm w-100p bg-indigo-500">4</div>
</div>

Another example using a grid layout.

1
2
3
4
5
6
<div class="p-2 u-round-sm bg-pink-100 grid grid-cols-3 u-gap-3 text-white font-bold u-text-center">
    <div class="p-4 u-round-sm w-100p bg-pink-500">1</div>
    <div class="p-4 u-round-sm w-100p bg-pink-500">2</div>
    <div class="p-4 u-round-sm w-100p bg-pink-500">3</div>
    <div class="p-4 u-round-sm w-100p bg-pink-500">4</div>
    <div class="p-4 u-round-sm w-100p bg-pink-500">5</div>
    <div class="p-4 u-round-sm w-100p bg-pink-500">6</div>
</div>

#Row/Column Specific

You can specify row and column specific gaps by using the u-row-gap-[size] and u-col-gap-[size] classes respectively.

1
2
3
4
5
6
<div class="p-2 u-round-sm bg-red-100 grid grid-cols-3 u-row-gap-1 u-col-gap-5 text-white font-bold u-text-center">
    <div class="p-4 u-round-sm w-100p bg-red-500">1</div>
    <div class="p-4 u-round-sm w-100p bg-red-500">2</div>
    <div class="p-4 u-round-sm w-100p bg-red-500">3</div>
    <div class="p-4 u-round-sm w-100p bg-red-500">4</div>
    <div class="p-4 u-round-sm w-100p bg-red-500">5</div>
    <div class="p-4 u-round-sm w-100p bg-red-500">6</div>
</div>

#Responsive

⚠ Note that the viewport variants are disabled in the default build of Cirrus. To enable, you must enable it yourself in _configs.scss and create a custom build or enable it in the config in your Sass project.

//_configs.scss
$config: (
    viewports: (
        flags.$GAP: true,
    )
) !default;

To use the viewport variant of a given class, you just need to suffix each class with a viewport selector. For example, use u-gap-3-md to apply gap: calc(0.5rem * 3) to an element only at medium screen sizes and above.

<div class="u-gap-3-md">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.

#Variants

The classes specified above are the default utility classes for defining gaps and it is dependent on the sizing used within the framework. You can add, change, or remove sizes in _config.scss in your own build.

// _config.scss
$config: (
    extend: (
        sizing-system: (
            base-size: 0.25rem,
            steps: (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 60, 72)
        )
    )
) !default;

This would generate the following gap classes.

.u-gap-0 {
    gap: calc(0.25rem * 0) !important
}
/* ... */
.u-gap-72 {
    gap: calc(0.25rem * 72) !important;
}

Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.