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 gap-x:lg gap-y:xl grid-cols:3@md">  ...</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:lg@dark gap:0@print gap:md@sm">...</div>

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