Gap
The .gap-* classes add or modify the --gap CSS variable any elements that use display: grid or display: flex, like cluster, split, and grid.
Some components, like .list-inline, also use --gap to set a column-gap property.
Gap Classes
The gap sizes correspond with their associated --size-* CSS variables.
| Class | Size |
|---|---|
.gap-0 |
0 |
.gap-6xs |
0.125em |
.gap-5xs |
0.25em |
.gap-4xs |
0.5em |
.gap-3xs |
0.6875em |
.gap-2xs |
0.75em |
.gap-xs |
0.8125em |
.gap-s |
0.9375em |
.gap-m |
1em |
.gap-l |
1.0625em |
.gap-xl |
1.1875em |
.gap-2xl |
1.3125em |
.gap-3xl |
1.5em |
.gap-4xl |
1.75em |
.gap-5xl |
2em |
.gap-6xl |
3em |
Gap Margin
There are two additional classes: .gap-start and .gap-end.
These apply a margin-block-start or margin-block-end property to the element, respectively, with a value equal to the --gap variable.