Gap
The Gap system provides consistent spacing between elements using CSS gap property. It offers predefined sizes, responsive spacing, and custom values to maintain visual rhythm throughout your interface.
Base Sizes
The gap system includes seven predefined sizes, from xsmall to xxlarge. These standardized spaces help maintain consistent spacing across your application's grid and flex layouts.
Standard Gaps
Use gap--xsmall for tight spacing,
gap for default spacing, and larger
variants for more generous spacing needs.
Predefined Gaps
Design System
<!-- Available gap sizes from smallest to largest -->
<div class="grid grid--col-3 gap--xsmall">...</div>
<div class="grid grid--col-3 gap--small">...</div>
<div class="grid grid--col-3 gap">...</div>
<div class="grid grid--col-3 gap--medium">...</div>
<div class="grid grid--col-3 gap--large">...</div>
<div class="grid grid--col-3 gap--xlarge">...</div>
<div class="grid grid--col-3 gap--xxlarge">...</div>Distribution Modifiers
Beyond fixed gaps, you can use special modifiers to control how space is distributed between elements. These modifiers are particularly useful for creating flexible, dynamic layouts.
Space Between
The gap--space-between modifier
distributes available space evenly between elements, pushing them to the edges of their container.
Space Between Gap
Design System
<!-- Space between elements in a flex container -->
<div class="flex flex--col gap--space-between h-full">
<div>First item</div>
<div>Second item</div>
<div>Third item</div>
</div>Custom Values
When predefined gaps don't meet your specific needs, you can use custom pixel values. This provides precise control over spacing while maintaining the consistent gap syntax.
Arbitrary Pixel Values
Use gap--[Npx] syntax to specify
exact pixel values. This works with both grid and flex layouts.
Custom Pixel Gaps
Design System
<!-- Custom gap values -->
<div class="grid grid--col-3 gap--[5px]">...</div>
<div class="grid grid--col-3 gap--[10px]">...</div>
<div class="grid grid--col-3 gap--[15px]">...</div>
<!-- Works with flex containers too -->
<div class="flex flex--col gap--[20px]">...</div>Related Tokens
These tokens are automatically mapped to this page by token prefix.
| Token | 1-bit | 2-bit | Density 2x | 4/8/16-bit |
|---|---|---|---|---|
--gap-large
|
20px | — | — | — |
--gap-medium
|
16px | — | — | — |
--gap-small
|
7px | — | — | — |
--gap-xlarge
|
30px | — | — | — |
--gap-xsmall
|
5px | — | — | — |
--gap-xxlarge
|
40px | — | — | — |
--list-gap-large
|
16px | — | — | — |
--list-gap-small
|
8px | — | — | — |