gap-y-* — vertical gutters only. This family contains 35 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
gap-y-0 | row-gap: 0px; |
gap-y-1 | row-gap: 0.25rem; |
gap-y-2 | row-gap: 0.5rem; |
gap-y-3 | row-gap: 0.75rem; |
gap-y-4 | row-gap: 1rem; |
gap-y-5 | row-gap: 1.25rem; |
gap-y-6 | row-gap: 1.5rem; |
gap-y-7 | row-gap: 1.75rem; |
gap-y-8 | row-gap: 2rem; |
gap-y-9 | row-gap: 2.25rem; |
gap-y-10 | row-gap: 2.5rem; |
gap-y-11 | row-gap: 2.75rem; |
gap-y-12 | row-gap: 3rem; |
gap-y-14 | row-gap: 3.5rem; |
gap-y-16 | row-gap: 4rem; |
gap-y-20 | row-gap: 5rem; |
gap-y-24 | row-gap: 6rem; |
gap-y-28 | row-gap: 7rem; |
gap-y-32 | row-gap: 8rem; |
gap-y-36 | row-gap: 9rem; |
gap-y-40 | row-gap: 10rem; |
gap-y-44 | row-gap: 11rem; |
gap-y-48 | row-gap: 12rem; |
gap-y-52 | row-gap: 13rem; |
gap-y-56 | row-gap: 14rem; |
gap-y-60 | row-gap: 15rem; |
gap-y-64 | row-gap: 16rem; |
gap-y-72 | row-gap: 18rem; |
gap-y-80 | row-gap: 20rem; |
gap-y-96 | row-gap: 24rem; |
gap-y-px | row-gap: 1px; |
gap-y-0.5 | row-gap: 0.125rem; |
gap-y-1.5 | row-gap: 0.375rem; |
gap-y-2.5 | row-gap: 0.625rem; |
gap-y-3.5 | row-gap: 0.875rem; |
Example#
example
<div class="flex flex-col gap-y-2">…</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.
Related#
utilities/spacing/spacing-scale|Spacing scale · utilities/sizing/width|Width · comparisons/margin-vs-padding|Margin vs padding