#Gap
Define gutters between Flexbox and Grid items.
Class | Styles |
---|---|
u-gap-0 |
|
u-gap-1 |
|
u-gap-2 |
|
u-gap-3 |
|
u-gap-4 |
|
u-gap-5 |
|
u-gap-6 |
|
u-gap-8 |
|
u-gap-10 |
|
u-gap-12 |
|
u-gap-16 |
|
u-gap-20 |
|
u-gap-24 |
|
u-gap-32 |
|
Define gutters between Flexbox and Grid items.
Class | Styles |
---|---|
u-gap-0 |
|
u-gap-1 |
|
u-gap-2 |
|
u-gap-3 |
|
u-gap-4 |
|
u-gap-5 |
|
u-gap-6 |
|
u-gap-8 |
|
u-gap-10 |
|
u-gap-12 |
|
u-gap-16 |
|
u-gap-20 |
|
u-gap-24 |
|
u-gap-32 |
|
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]
.
<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.
<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>
⚠ 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.
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.