gap

Setting the gutters between rows and columns.

Overview

Examples

Add the same gap on both axes

Use gap:* on flex and grid containers to set the spacing between children. Unlike margin, gap only affects space between items and does not add space around the outside edge.

<div class="grid-cols:3 gap:md">    <article>...</article>    <article>...</article>    <article>...</article></div>

@layer theme {    :root {        --spacing-md: 1rem    }}@layer utilities {    .gap\:md {        gap: var(--spacing-md)    }    .grid-cols\:3 {        display: grid;        grid-template-columns: repeat(3, minmax(0, 1fr))    }}

Set row and column gaps separately

Use gap-y:* for row gaps and gap-x:* for column gaps. This is common in card grids where horizontal gutters and vertical rhythm need different values.

<section class="grid-cols:1 grid-cols:3@md gap-x:lg gap-y:xl">    ...</section>

You can also set row and column values in one class with gap:<row>|<column>.

<section class="grid-cols:3 gap:xl|lg">    ...</section>

Use gap for component internals

Gap is usually easier to maintain than child margins for toolbars, stacks, media objects, and repeated lists.

<div class="flex items-center gap:sm">    <img class="size:8x round" alt="" />    <span>Aron</span></div>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="gap:xs:hover gap:md@sm gap:lg@dark gap:0@print">...</div>

For page and component rhythm, prefer shared spacing tokens such as sm, md, and lg.