gap-x-* — horizontal gutters only. This family contains 35 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
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; |
gap-x-60 | column-gap: 15rem; |
gap-x-64 | column-gap: 16rem; |
gap-x-72 | column-gap: 18rem; |
gap-x-80 | column-gap: 20rem; |
gap-x-96 | column-gap: 24rem; |
gap-x-px | column-gap: 1px; |
gap-x-0.5 | column-gap: 0.125rem; |
gap-x-1.5 | column-gap: 0.375rem; |
gap-x-2.5 | column-gap: 0.625rem; |
gap-x-3.5 | column-gap: 0.875rem; |
Example#
example
<div class="grid grid-cols-3 gap-x-6 gap-y-10">…</div>Responsive & variants#
Every class here accepts screen prefixes (xxs: … 5xl:) 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#
- Editorial grids often want gap-x < gap-y
Related#
utilities/spacing/spacing-scale|Spacing scale · utilities/sizing/width|Width · comparisons/margin-vs-padding|Margin vs padding