gap-* sets the gutter between flex/grid children — both axes at once. This family contains 70 generated classes in Nakshora 3.0.
Classes#
| Class | Generated CSS |
|---|---|
gap-0 | gap: 0px; |
gap-1 | gap: 0.25rem; |
gap-2 | gap: 0.5rem; |
gap-3 | gap: 0.75rem; |
gap-4 | gap: 1rem; |
gap-5 | gap: 1.25rem; |
gap-6 | gap: 1.5rem; |
gap-7 | gap: 1.75rem; |
gap-8 | gap: 2rem; |
gap-9 | gap: 2.25rem; |
gap-10 | gap: 2.5rem; |
gap-11 | gap: 2.75rem; |
gap-12 | gap: 3rem; |
gap-14 | gap: 3.5rem; |
gap-16 | gap: 4rem; |
gap-20 | gap: 5rem; |
gap-24 | gap: 6rem; |
gap-28 | gap: 7rem; |
gap-32 | gap: 8rem; |
gap-36 | gap: 9rem; |
gap-40 | gap: 10rem; |
gap-44 | gap: 11rem; |
gap-48 | gap: 12rem; |
gap-52 | gap: 13rem; |
gap-56 | gap: 14rem; |
gap-60 | gap: 15rem; |
gap-64 | gap: 16rem; |
gap-72 | gap: 18rem; |
gap-80 | gap: 20rem; |
gap-96 | gap: 24rem; |
gap-px | gap: 1px; |
gap-0.5 | gap: 0.125rem; |
gap-1.5 | gap: 0.375rem; |
gap-2.5 | gap: 0.625rem; |
gap-3.5 | gap: 0.875rem; |
gap-x-0 | column-gap: 0px; |
gap-x-1 | column-gap: 0.25rem; |
gap-x-2 | column-gap: 0.5rem; |
gap-x-3 | column-gap: 0.75rem; |
gap-x-4 | column-gap: 1rem; |
gap-x-5 | column-gap: 1.25rem; |
gap-x-6 | column-gap: 1.5rem; |
gap-x-7 | column-gap: 1.75rem; |
gap-x-8 | column-gap: 2rem; |
gap-x-9 | column-gap: 2.25rem; |
gap-x-10 | column-gap: 2.5rem; |
gap-x-11 | column-gap: 2.75rem; |
gap-x-12 | column-gap: 3rem; |
gap-x-14 | column-gap: 3.5rem; |
gap-x-16 | column-gap: 4rem; |
gap-x-20 | column-gap: 5rem; |
gap-x-24 | column-gap: 6rem; |
gap-x-28 | column-gap: 7rem; |
gap-x-32 | column-gap: 8rem; |
gap-x-36 | column-gap: 9rem; |
gap-x-40 | column-gap: 10rem; |
gap-x-44 | column-gap: 11rem; |
gap-x-48 | column-gap: 12rem; |
gap-x-52 | column-gap: 13rem; |
gap-x-56 | column-gap: 14rem; |
…and 10 more in this family — search by class name to find the exact one.
Example#
example
<div class="flex flex-wrap gap-3">…chips…</div>Responsive & variants#
Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- gap beats margin in every flex/grid situation
- gap accepts the full spacing scale + breakpoints: md:gap-6
Related#
utilities/spacing/spacing-scale|Spacing scale · utilities/sizing/width|Width · comparisons/margin-vs-padding|Margin vs padding