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.
Size Variants
The gap system includes predefined base sizes and arbitrary pixel values. These standardized spaces help maintain consistent spacing across your application's grid and flex layouts.
Base
The base gap class without size modifiers
and the gap--base class both produce the same visual result,
providing the standard spacing. Use gap--base when you need
to explicitly set the base size in responsive contexts. See the Responsive Gaps section for examples.
Predefined Gaps
Design System
<!-- Available base gap sizes from smallest to largest -->
<div class="grid grid--cols-3 gap--none">...</div>
<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>
<!-- Or using the base modifier -->
<div class="flex flex--col gap--base">...</div>Arbitrary
Use gap--[Npx] syntax to specify
exact pixel values from 0px to 50px. This works with both grid and flex layouts, but does not support responsive variants.
Arbitrary Pixel Gaps
Design System
<!-- Custom gap values from 0px to 50px (no responsive support) -->
<div class="grid grid--cols-3 gap--[0px]">...</div>
<div class="grid grid--cols-3 gap--[10px]">...</div>
<div class="grid grid--cols-3 gap--[30px]">...</div>
<div class="grid grid--cols-3 gap--[50px]">...</div>
<!-- Works with flex containers too -->
<div class="flex flex--col gap--[25px]">...</div>
Arbitrary gap values using the gap--[Npx] syntax do not support responsive variants. Use predefined gap classes if you need responsive behavior.
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.
Auto Distribution
The gap--auto modifier
distributes available space evenly between elements, pushing them to the edges of their container.
Auto Distribution Gap
Design System
<!-- Auto distribution in a flex container -->
<div class="flex flex--col gap--auto h--52">
<div>...</div>
<div>...</div>
<div>...</div>
</div>Responsive Gaps
Gap utilities support size-based breakpoints, orientation variants, and their combination.
Use prefixes like md:, portrait:,
and md:portrait: to target conditions.
Responsive Gap Examples
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.
The --base modifier
is particularly useful for resetting to the default size at specific breakpoints.
Responsive Gaps
Size-Based
<!-- Size + orientation examples -->
<div class="grid grid--cols-3 gap--small md:gap--large lg:gap--xlarge portrait:gap--medium md:portrait:gap--xlarge">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
<!-- Examples of different responsive patterns -->
<div class="flex flex--col gap md:gap--large portrait:gap--small">...</div>
<div class="grid grid--cols-2 gap--xsmall lg:gap--medium md:portrait:gap--large">...</div>
<!-- Using base modifier to reset to default size at breakpoint -->
<div class="grid grid--cols-3 gap--small lg:gap--base">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
Gap utilities only support size-based responsive variants. Bit-depth variants (like 1bit: or 4bit:) are not available for gap classes.