Expand description
Utilities for controlling gutters between grid and flexbox items.
| Class | Properties |
|---|---|
| gap-<float> | gap: <float / 4>rem; |
| gap-<integer>/<integer> | gap: (<integer>/<integer>)%; |
| gap-px | gap: 1px; |
| gap-x-<float> | column-gap: <float / 4>rem; |
| gap-x-<integer>/<integer> | column-gap: (<integer>/<integer>)%; |
| gap-x-px | column-gap: 1px; |
| gap-y-<float> | row-gap: <float / 4>rem; |
| gap-y-<integer>/<integer> | row-gap: (<integer>/<integer>)%; |
| gap-y-px | row-gap: 1px; |
§Tailwind compatibility
Gap values don’t follow Tailwind’s philosophy of limiting possible values and all spacing values are supported. They are however perfectly compatible with Tailwind’s values.
§Arbitrary values
Any <length> property is allowed as arbitrary value.
For example, gap-[0.5rem].