Gap

Utilities for controlling gutters between grid rows and columns


Class reference

ClassProperties
gap-0gap: 0;
gap-pxgap: 1px;
gap-0.5gap: 0.125rem;
gap-1gap: 0.25rem;
gap-1.5gap: 0.375rem;
gap-2gap: 0.5rem;
gap-2.5gap: 0.625rem;
gap-3gap: 0.75rem;
gap-3.5gap: 0.875rem;
gap-4gap: 1rem;
gap-4.5gap: 1.125rem;
gap-5gap: 1.25rem;
gap-6gap: 1.5rem;
gap-7gap: 1.75rem;
gap-8gap: 2rem;
gap-9gap: 2.25rem;
gap-10gap: 2.5rem;
gap-11gap: 2.75rem;
gap-12gap: 3rem;
gap-13gap: 3.25rem;
gap-14gap: 3.5rem;
gap-15gap: 3.75rem;
gap-16gap: 4rem;
gap-18gap: 4.5rem;
gap-20gap: 5rem;
gap-24gap: 6rem;
gap-28gap: 7rem;
gap-32gap: 8rem;
gap-36gap: 9rem;
gap-40gap: 10rem;
gap-48gap: 12rem;
gap-56gap: 14rem;
gap-60gap: 15rem;
gap-64gap: 16rem;
gap-72gap: 18rem;
gap-80gap: 20rem;
gap-96gap: 24rem;
gap-x-0column-gap: 0;
gap-x-pxcolumn-gap: 1px;
gap-x-0.5column-gap: 0.125rem;
gap-x-1column-gap: 0.25rem;
gap-x-1.5column-gap: 0.375rem;
gap-x-2column-gap: 0.5rem;
gap-x-2.5column-gap: 0.625rem;
gap-x-3column-gap: 0.75rem;
gap-x-3.5column-gap: 0.875rem;
gap-x-4column-gap: 1rem;
gap-x-4.5column-gap: 1.125rem;
gap-x-5column-gap: 1.25rem;
gap-x-6column-gap: 1.5rem;
gap-x-7column-gap: 1.75rem;
gap-x-8column-gap: 2rem;
gap-x-9column-gap: 2.25rem;
gap-x-10column-gap: 2.5rem;
gap-x-11column-gap: 2.75rem;
gap-x-12column-gap: 3rem;
gap-x-13column-gap: 3.25rem;
gap-x-14column-gap: 3.5rem;
gap-x-15column-gap: 3.75rem;
gap-x-16column-gap: 4rem;
gap-x-18column-gap: 4.5rem;
gap-x-20column-gap: 5rem;
gap-x-24column-gap: 6rem;
gap-x-28column-gap: 7rem;
gap-x-32column-gap: 8rem;
gap-x-36column-gap: 9rem;
gap-x-40column-gap: 10rem;
gap-x-48column-gap: 12rem;
gap-x-56column-gap: 14rem;
gap-x-60column-gap: 15rem;
gap-x-64column-gap: 16rem;
gap-x-72column-gap: 18rem;
gap-x-80column-gap: 20rem;
gap-x-96column-gap: 24rem;
gap-y-0row-gap: 0;
gap-y-pxrow-gap: 1px;
gap-y-0.5row-gap: 0.125rem;
gap-y-1row-gap: 0.25rem;
gap-y-1.5row-gap: 0.375rem;
gap-y-2row-gap: 0.5rem;
gap-y-2.5row-gap: 0.625rem;
gap-y-3row-gap: 0.75rem;
gap-y-3.5row-gap: 0.875rem;
gap-y-4row-gap: 1rem;
gap-y-4.5row-gap: 1.125rem;
gap-y-5row-gap: 1.25rem;
gap-y-6row-gap: 1.5rem;
gap-y-7row-gap: 1.75rem;
gap-y-8row-gap: 2rem;
gap-y-9row-gap: 2.25rem;
gap-y-10row-gap: 2.5rem;
gap-y-11row-gap: 2.75rem;
gap-y-12row-gap: 3rem;
gap-y-13row-gap: 3.25rem;
gap-y-14row-gap: 3.5rem;
gap-y-15row-gap: 3.75rem;
gap-y-16row-gap: 4rem;
gap-y-18row-gap: 4.5rem;
gap-y-20row-gap: 5rem;
gap-y-24row-gap: 6rem;
gap-y-28row-gap: 7rem;
gap-y-32row-gap: 8rem;
gap-y-36row-gap: 9rem;
gap-y-40row-gap: 10rem;
gap-y-48row-gap: 12rem;
gap-y-56row-gap: 14rem;
gap-y-60row-gap: 15rem;
gap-y-64row-gap: 16rem;
gap-y-72row-gap: 18rem;
gap-y-80row-gap: 20rem;
gap-y-96row-gap: 24rem;

# Gap

Use .gap-{size} to change the gutter size in grid layouts.

<div class="grid gap-4 grid-cols-2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

# Changing row and column gaps independently

Use gap-x-{size} and gap-y-{size} to change the gap between rows and columns independently.

<div class="grid gap-x-8 gap-y-4 grid-cols-3">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

# Responsive

To control the gap at a specific breakpoint, add a {screen}: prefix to any existing gap utility. For example, use md:gap-6 to apply the gap-6 utility at only medium screen sizes and above.

<div class="grid gap-4 md:gap-6 ...">
<!-- ... -->
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.