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--cols-3 gap--xsmall">...</div>
<div class="grid grid--cols-3 gap--small">...</div>
<div class="grid grid--cols-3 gap">...</div>
<div class="grid grid--cols-3 gap--medium">...</div>
<div class="grid grid--cols-3 gap--large">...</div>
<div class="grid grid--cols-3 gap--xlarge">...</div>
<div class="grid grid--cols-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--52">
<div>...</div>
<div>...</div>
<div>...</div>
</div>Size-Based Responsive
Gap utilities support size-based responsive breakpoints, allowing you to adjust spacing based on screen dimensions.
Use prefixes like md: and lg:
to apply different gap values at different screen sizes.
Responsive Gap Sizes
Apply different gap values at different breakpoints using the size-based responsive system. The framework follows a mobile-first approach where larger breakpoints inherit smaller ones.
Responsive Gaps
Size-Based
<!-- Small gap by default, large on medium screens, xlarge on large screens -->
<div class="grid grid--cols-3 gap--small md:gap--large lg:gap--xlarge">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
<!-- Examples of different responsive patterns -->
<div class="flex flex--col gap md:gap--large">...</div>
<div class="grid grid--cols-2 gap--xsmall lg:gap--medium">...</div>
Gap utilities only support size-based responsive variants. Bit-depth variants (like 1bit: or 4bit:) are not available for gap classes.
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, but does not support responsive variants.
Custom Pixel Gaps
Design System
<!-- Custom gap values (no responsive support) -->
<div class="grid grid--cols-3 gap--[5px]">...</div>
<div class="grid grid--cols-3 gap--[10px]">...</div>
<div class="grid grid--cols-3 gap--[15px]">...</div>
<!-- Works with flex containers too -->
<div class="flex flex--col gap--[20px]">...</div>
Arbitrary gap values using the gap--[Npx] syntax do not support responsive variants. Use predefined gap classes if you need responsive behavior.