Flexbox & Grid
Gap
Utilities for controlling gutters between grid and flexbox items.
Quick reference
| Class | Properties |
|---|---|
| gap-0 | gap: 0rem; |
| gap-1 | gap: 0.0625rem; |
| gap-2 | gap: 0.125rem; |
| gap-4 | gap: 0.25rem; |
| gap-8 | gap: 0.5rem; |
| gap-12 | gap: 0.75rem; |
| gap-16 | gap: 1rem; |
| gap-20 | gap: 1.25rem; |
| gap-24 | gap: 1.5rem; |
| gap-32 | gap: 2rem; |
| gap-48 | gap: 3rem; |
| gap-64 | gap: 4rem; |
| gap-96 | gap: 6rem; |
| gap-x-0 | column-gap: 0rem; |
| gap-x-1 | column-gap: 0.0625rem; |
| gap-x-2 | column-gap: 0.125rem; |
| gap-x-4 | column-gap: 0.25rem; |
| gap-x-8 | column-gap: 0.5rem; |
| gap-x-12 | column-gap: 0.75rem; |
| gap-x-16 | column-gap: 1rem; |
| gap-x-20 | column-gap: 1.25rem; |
| gap-x-24 | column-gap: 1.5rem; |
| gap-x-32 | column-gap: 2rem; |
| gap-x-48 | column-gap: 3rem; |
| gap-x-64 | column-gap: 4rem; |
| gap-x-96 | column-gap: 6rem; |
| gap-y-0 | row-gap: 0rem; |
| gap-y-1 | row-gap: 0.0625rem; |
| gap-y-2 | row-gap: 0.125rem; |
| gap-y-4 | row-gap: 0.25rem; |
| gap-y-8 | row-gap: 0.5rem; |
| gap-y-12 | row-gap: 0.75rem; |
| gap-y-16 | row-gap: 1rem; |
| gap-y-20 | row-gap: 1.25rem; |
| gap-y-24 | row-gap: 1.5rem; |
| gap-y-32 | row-gap: 2rem; |
| gap-y-48 | row-gap: 3rem; |
| gap-y-64 | row-gap: 4rem; |
| gap-y-96 | row-gap: 6rem; |
Basic usage
Use gap-{$spacing} or gap-(x|y)-{$spacing} to change the gap between both rows and columns in grid and flexbox layouts.
Customization
$spacing values can be configured using theme.spacing.
Table of Contents