baseUtilities
Gap & basis
Gap utilities for flex and grid containers, gap-aware flex basis fractions, and coordination variables.
gap-* controls spacing in flex and grid containers. basis-* sets flex basis fractions that automatically account for container gaps.
Gap utilities
Loading components…
<div class="flex flex-col gap-lg w-full max-w-xl"> <div class="flex flex-col gap-xs"> <span class="text-xs text-muted-foreground font-strong">gap-xs</span> <div class="flex gap-xs"> <div class="flex-1 bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > 1 </div> <div class="flex-1 bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > 2 </div> <div class="flex-1 bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > 3 </div> </div> </div> <div class="flex flex-col gap-xs"> <span class="text-xs text-muted-foreground font-strong">gap-md</span> <div class="flex gap-md"> <div class="flex-1 bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > 1 </div> <div class="flex-1 bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > 2 </div> <div class="flex-1 bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > 3 </div> </div> </div> <div class="flex flex-col gap-xs"> <span class="text-xs text-muted-foreground font-strong">gap-xl</span> <div class="flex gap-xl"> <div class="flex-1 bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > 1 </div> <div class="flex-1 bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > 2 </div> <div class="flex-1 bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > 3 </div> </div> </div></div>| Class | Value |
|---|---|
gap-0 | 0 |
gap-0.5px | 0.5px |
gap-px | 1px |
gap-xs | var(--gap-xs) |
gap-sm | var(--gap-sm) |
gap-md | var(--gap-md) |
gap-lg | var(--gap-lg) |
gap-xl | var(--gap-xl) |
Axis-specific gaps
Use gap-x-* for column-gap and gap-y-* for row-gap:
<div class="grid grid-cols-3 gap-x-lg gap-y-sm">...</div>Flex basis fractions
Loading components…
<div class="flex flex-wrap gap-md w-full max-w-xl"> <div class="basis-1/2 bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > basis-1/2 </div> <div class="basis-1/2 bg-primary text-primary-foreground rounded-md p-sm text-center text-sm font-strong" > basis-1/2 </div> <div class="basis-1/3 bg-secondary text-secondary-foreground rounded-md p-sm text-center text-sm font-strong" > basis-1/3 </div> <div class="basis-1/3 bg-secondary text-secondary-foreground rounded-md p-sm text-center text-sm font-strong" > basis-1/3 </div> <div class="basis-1/3 bg-secondary text-secondary-foreground rounded-md p-sm text-center text-sm font-strong" > basis-1/3 </div></div>Fraction utilities subtract gap values so child elements fit on a single line:
| Class | Value |
|---|---|
basis-0 | flex-basis: 0 |
basis-auto | flex-basis: auto |
basis-full | flex-basis: 100% |
basis-1/2 | (100% - 1 * gap) / 2 |
basis-1/3 | (100% - 2 * gap) / 3 |
basis-1/4 | (100% - 3 * gap) / 4 |
basis-1/5 | (100% - 4 * gap) / 5 |
basis-1/6 | (100% - 5 * gap) / 6 |
Set a gap-* class on the flex container to pass the gap value into --_gap. With no gap class,
--_gap defaults to 0px.
Gap coordination variables
| Variable | Default | Set by | Consumed by |
|---|---|---|---|
--_gap | 0px | gap-* | basis-1/2 to basis-1/6, auto-fill grid |
--_gap-x | None | gap-x-* | column-gap |
--_gap-y | None | gap-y-* | row-gap |