Gap - v3
Gap utility classes in CodyFrame v3:
| CSS Class | Description |
|---|---|
g{p}ap-xxxxs |
set gap equal to var(--space-xxxxs) |
g{p}ap-xxxs |
set gap equal to var(--space-xxxs) |
g{p}ap-xxs |
set gap equal to var(--space-xxs) |
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-xxl |
set gap equal to var(--space-xxl) |
g{p}ap-xxxl |
set gap equal to var(--space-xxxl) |
g{p}ap-xxxxl |
set gap equal to var(--space-xxxxl) |
g{p}ap-0 |
set gap equal to 0px |
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 at a specific breakpoint:
<ul class="flex flex-wrap gap-sm gap-md@md">
<!-- ... -->
</ul>
