Gap
CSS gap utility classes:
| CSS Class | Description |
|---|---|
g{p}ap-4xs |
set gap equal to var(--space-4xs) |
g{p}ap-3xs |
set gap equal to var(--space-3xs) |
g{p}ap-2xs |
set gap equal to var(--space-2xs) |
g{p}ap-xs |
set gap equal to var(--space-xs) |
g{p}ap-sm |
set gap equal to var(--space-sm) |
g{p}ap-md |
set gap equal to var(--space-md) |
g{p}ap-lg |
set gap equal to var(--space-lg) |
g{p}ap-xl |
set gap equal to var(--space-xl) |
g{p}ap-2xl |
set gap equal to var(--space-2xl) |
g{p}ap-3xl |
set gap equal to var(--space-3xl) |
g{p}ap-4xl |
set gap equal to var(--space-4xl) |
g{p}ap-0 |
set gap equal to 0px |
The gap scale depends on the spacing scale.
To target only the vertical gaps (i.e., row gap), use the .gap-y-{size} classes:
<ul class="grid gap-y-md">
<!-- ... -->
</ul>To target only the horizontal gaps (i.e., column gap), use the .gap-x-{size} classes:
<ul class="grid gap-x-sm">
<!-- ... -->
</ul>Use the .gap-{size}@{breakpoint}, .gap-y-{size}@{breakpoint}, and .gap-x-{size}@{breakpoint} responsive helpers to modify the gap value at a specific breakpoint:
<ul class="flex flex-wrap gap-sm gap-md@md">
<!-- ... -->
</ul>
