flex
gap
Utilities for controlling gutters between flexbox items.
Overview
These are fluid <sizes>-based utilities.
| Class | Style |
|---|---|
| gap-<size> | gap: var(--size-<size>); |
| row-gap-<size> | row-gap: var(--size-<size>); |
| column-gap-<size> | column-gap: var(--size-<size>); |
| --row-gap-<size> | --row-gap: var(--size-<size>); |
| --column-gap-<size> | --column-gap: var(--size-<size>); |
In Depth
| Class | Style |
|---|---|
| gap-auto | gap: var(--size-auto); |
| gap-zero | gap: var(--size-zero); |
| gap-3xs | gap: var(--size-3xs); |
| gap-2xs | gap: var(--size-2xs); |
| gap-xs | gap: var(--size-xs); |
| gap-sm | gap: var(--size-sm); |
| gap-md | gap: var(--size-md); |
| gap-ml | gap: var(--size-ml); |
| gap-lg | gap: var(--size-lg); |
| gap-xl | gap: var(--size-xl); |
| gap-2xl | gap: var(--size-2xl); |
| gap-3xl | gap: var(--size-3xl); |
| gap-4xl | gap: var(--size-4xl); |
| gap-5xl | gap: var(--size-5xl); |
| gap-6xl | gap: var(--size-6xl); |
| gap-7xl | gap: var(--size-7xl); |
| gap-8xl | gap: var(--size-8xl); |
| gap-9xl | gap: var(--size-9xl); |
| gap-10xl | gap: var(--size-10xl); |
| gap-max | gap: var(--size-max); |
| Class | Style |
|---|---|
| row-gap-auto | row-gap: var(--size-auto); |
| row-gap-zero | row-gap: var(--size-zero); |
| row-gap-3xs | row-gap: var(--size-3xs); |
| row-gap-2xs | row-gap: var(--size-2xs); |
| row-gap-xs | row-gap: var(--size-xs); |
| row-gap-sm | row-gap: var(--size-sm); |
| row-gap-md | row-gap: var(--size-md); |
| row-gap-ml | row-gap: var(--size-ml); |
| row-gap-lg | row-gap: var(--size-lg); |
| row-gap-xl | row-gap: var(--size-xl); |
| row-gap-2xl | row-gap: var(--size-2xl); |
| row-gap-3xl | row-gap: var(--size-3xl); |
| row-gap-4xl | row-gap: var(--size-4xl); |
| row-gap-5xl | row-gap: var(--size-5xl); |
| row-gap-6xl | row-gap: var(--size-6xl); |
| row-gap-7xl | row-gap: var(--size-7xl); |
| row-gap-8xl | row-gap: var(--size-8xl); |
| row-gap-9xl | row-gap: var(--size-9xl); |
| row-gap-10xl | row-gap: var(--size-10xl); |
| row-gap-max | row-gap: var(--size-max); |
| Class | Style |
|---|---|
| column-gap-auto | column-gap: var(--size-auto); |
| column-gap-zero | column-gap: var(--size-zero); |
| column-gap-3xs | column-gap: var(--size-3xs); |
| column-gap-2xs | column-gap: var(--size-2xs); |
| column-gap-xs | column-gap: var(--size-xs); |
| column-gap-sm | column-gap: var(--size-sm); |
| column-gap-md | column-gap: var(--size-md); |
| column-gap-ml | column-gap: var(--size-ml); |
| column-gap-lg | column-gap: var(--size-lg); |
| column-gap-xl | column-gap: var(--size-xl); |
| column-gap-2xl | column-gap: var(--size-2xl); |
| column-gap-3xl | column-gap: var(--size-3xl); |
| column-gap-4xl | column-gap: var(--size-4xl); |
| column-gap-5xl | column-gap: var(--size-5xl); |
| column-gap-6xl | column-gap: var(--size-6xl); |
| column-gap-7xl | column-gap: var(--size-7xl); |
| column-gap-8xl | column-gap: var(--size-8xl); |
| column-gap-9xl | column-gap: var(--size-9xl); |
| column-gap-10xl | column-gap: var(--size-10xl); |
| column-gap-max | column-gap: var(--size-max); |
| Class | Style |
|---|---|
| --row-gap-auto | --row-gap: var(--size-auto); |
| --row-gap-zero | --row-gap: var(--size-zero); |
| --row-gap-3xs | --row-gap: var(--size-3xs); |
| --row-gap-2xs | --row-gap: var(--size-2xs); |
| --row-gap-xs | --row-gap: var(--size-xs); |
| --row-gap-sm | --row-gap: var(--size-sm); |
| --row-gap-md | --row-gap: var(--size-md); |
| --row-gap-ml | --row-gap: var(--size-ml); |
| --row-gap-lg | --row-gap: var(--size-lg); |
| --row-gap-xl | --row-gap: var(--size-xl); |
| --row-gap-2xl | --row-gap: var(--size-2xl); |
| --row-gap-3xl | --row-gap: var(--size-3xl); |
| --row-gap-4xl | --row-gap: var(--size-4xl); |
| --row-gap-5xl | --row-gap: var(--size-5xl); |
| --row-gap-6xl | --row-gap: var(--size-6xl); |
| --row-gap-7xl | --row-gap: var(--size-7xl); |
| --row-gap-8xl | --row-gap: var(--size-8xl); |
| --row-gap-9xl | --row-gap: var(--size-9xl); |
| --row-gap-10xl | --row-gap: var(--size-10xl); |
| --row-gap-max | --row-gap: var(--size-max); |
| Class | Style |
|---|---|
| --column-gap-auto | --column-gap: var(--size-auto); |
| --column-gap-zero | --column-gap: var(--size-zero); |
| --column-gap-3xs | --column-gap: var(--size-3xs); |
| --column-gap-2xs | --column-gap: var(--size-2xs); |
| --column-gap-xs | --column-gap: var(--size-xs); |
| --column-gap-sm | --column-gap: var(--size-sm); |
| --column-gap-md | --column-gap: var(--size-md); |
| --column-gap-ml | --column-gap: var(--size-ml); |
| --column-gap-lg | --column-gap: var(--size-lg); |
| --column-gap-xl | --column-gap: var(--size-xl); |
| --column-gap-2xl | --column-gap: var(--size-2xl); |
| --column-gap-3xl | --column-gap: var(--size-3xl); |
| --column-gap-4xl | --column-gap: var(--size-4xl); |
| --column-gap-5xl | --column-gap: var(--size-5xl); |
| --column-gap-6xl | --column-gap: var(--size-6xl); |
| --column-gap-7xl | --column-gap: var(--size-7xl); |
| --column-gap-8xl | --column-gap: var(--size-8xl); |
| --column-gap-9xl | --column-gap: var(--size-9xl); |
| --column-gap-10xl | --column-gap: var(--size-10xl); |
| --column-gap-max | --column-gap: var(--size-max); |