Gap
Responsive
Add spacing between elements in a Grid or Stack.
| Class | Result |
|---|---|
| .gap-0 | 0px gap on all sides |
| .gap-1 | 4px gap on all sides |
| .gap-2 | 8px gap on all sides |
| .gap-3 | 12px gap on all sides |
| .gap-4 | 16px gap on all sides |
| .gap-5 | 20px gap on all sides |
| .gap-6 | 24px gap on all sides |
| .gap-7 | 28px gap on all sides |
| .gap-8 | 32px gap on all sides |
| .gap-9 | 36px gap on all sides |
| .gap-10 | 40px gap on all sides |
| .gap-12 | 48px gap on all sides |
| .gap-16 | 64px gap on all sides |
| .gap-20 | 80px gap on all sides |
| .gap-24 | 96px gap on all sides |
| .gap-32 | 128px gap on all sides |
| .gap-40 | 160px gap on all sides |
| .gap-x-0 | 0px horizontal gap |
| .gap-x-1 | 4px horizontal gap |
| .gap-x-2 | 8px horizontal gap |
| .gap-x-3 | 12px horizontal gap |
| .gap-x-4 | 16px horizontal gap |
| .gap-x-5 | 20px horizontal gap |
| .gap-x-6 | 24px horizontal gap |
| .gap-x-7 | 28px horizontal gap |
| .gap-x-8 | 32px horizontal gap |
| .gap-x-9 | 36px horizontal gap |
| .gap-x-10 | 40px horizontal gap |
| .gap-x-12 | 48px horizontal gap |
| .gap-x-16 | 64px horizontal gap |
| .gap-x-20 | 80px horizontal gap |
| .gap-x-24 | 96px horizontal gap |
| .gap-x-32 | 128px horizontal gap |
| .gap-x-40 | 160px horizontal gap |
| .gap-y-0 | 0px vertical gap |
| .gap-y-1 | 4px vertical gap |
| .gap-y-2 | 8px vertical gap |
| .gap-y-3 | 12px vertical gap |
| .gap-y-4 | 16px vertical gap |
| .gap-y-5 | 20px vertical gap |
| .gap-y-6 | 24px vertical gap |
| .gap-y-7 | 28px vertical gap |
| .gap-y-8 | 32px vertical gap |
| .gap-y-9 | 36px vertical gap |
| .gap-y-10 | 40px vertical gap |
| .gap-y-12 | 48px vertical gap |
| .gap-y-16 | 64px vertical gap |
| .gap-y-20 | 80px vertical gap |
| .gap-y-24 | 96px vertical gap |
| .gap-y-32 | 128px vertical gap |
| .gap-y-40 | 160px vertical gap |
Usage
Just like the margin and padding classes, multiply the class number by 4px to get the size. Ex. gap-10 is 40px.
Grid
By default the grid .row class has 24px horizontal gutters. You can apply these gap classes to the row class to change horizontal and vertical gutters row gap-4 will add 16px gutters on all sizes. Top and bottom gutters are useful for when a grid is responsive and stacks columns vertically on mobile. More about using Gap with Grid
Stack
Use gap here to spread elements in a stack, horizontally if it is a stack-x and vertically if it is a stack-y. More about using Gap with Stacks