Gap Utilities
Gap utilities in NuvoUI help you control the spacing between child elements in flex and grid layouts, creating consistent separation between items.
Configuration
The gap utilities are built on configurable variables:
Spacing Scale
Gap utilities use the same spacing scale as other spacing utilities:
Basic Gap
Control spacing between elements in flex and grid layouts using the .gap-{size} utility:
Directional Gaps
Control horizontal and vertical gaps independently:
Different Gap Sizes
Apply different gap sizes to control spacing density:
Combining Directional Gaps
Use different horizontal and vertical gaps for more complex layouts:
Responsive Gaps
Apply different gaps at different breakpoints:
Auto Gap
Use the .gap-auto utility for browser-determined gap:
Common Use Cases
Card Grid Layout
Image Gallery
Button Group with Consistent Spacing
Form Layout
Visual Gap Comparison
Compare different gap sizes:
Gap Utilities Reference Table
Basic Gap Classes
| Class | CSS Property | Description |
|---|---|---|
.gap-0 | gap: 0 | No gap |
.gap-1 | gap: 0.25rem | Extra small gap (4px) |
.gap-2 | gap: 0.5rem | Small gap (8px) |
.gap-3 | gap: 0.75rem | Medium small gap (12px) |
.gap-4 | gap: 1rem | Medium gap (16px) |
.gap-5 | gap: 1.25rem | Medium large gap (20px) |
.gap-6 | gap: 1.5rem | Large gap (24px) |
.gap-8 | gap: 2rem | Extra large gap (32px) |
.gap-10 | gap: 2.5rem | 2x large gap (40px) |
.gap-12 | gap: 3rem | 3x large gap (48px) |
.gap-16 | gap: 4rem | 4x large gap (64px) |
.gap-20 | gap: 5rem | 5x large gap (80px) |
.gap-24 | gap: 6rem | 6x large gap (96px) |
.gap-32 | gap: 8rem | 8x large gap (128px) |
.gap-40 | gap: 10rem | 10x large gap (160px) |
.gap-48 | gap: 12rem | 12x large gap (192px) |
.gap-56 | gap: 14rem | 14x large gap (224px) |
.gap-64 | gap: 16rem | 16x large gap (256px) |
.gap-auto | gap: auto | Browser-determined gap |
Directional Gap Classes
| Class | CSS Property | Description |
|---|---|---|
.gap-x-0 to .gap-x-64 | column-gap: [value] | Horizontal gap between items |
.gap-y-0 to .gap-y-64 | row-gap: [value] | Vertical gap between items |
Responsive Gap Classes
Add @{breakpoint} suffix to any gap class for responsive behavior:
.gap-4@sm.gap-x-6@md.gap-y-8@lg.gap-auto@xl
SCSS Mixins
NuvoUI provides gap mixins for use in your SCSS:
Gap Mixins
| Mixin | Parameters | Description |
|---|---|---|
@include gap($val) | $val: Gap value | Sets gap on all sides |
@include gap-x($val) | $val: Gap value | Sets horizontal gap (column-gap) |
@include gap-y($val) | $val: Gap value | Sets vertical gap (row-gap) |
Example SCSS Usage
Advanced Component Building
Use gap mixins to create flexible, responsive layouts: