Utilitário

Gap

Define o espaçamento entre itens em layouts flex e grid.

Classes

A escala de gap reaproveita a escala de espaçamentos do design system.

Para mirar apenas o gap vertical (entre linhas), use as classes .gap-y-{size}:

<ul class="grid gap-y-md">
  <!-- ... -->
</ul>

Para apenas o gap horizontal (entre colunas), use .gap-x-{size}:

<ul class="grid gap-x-sm">
  <!-- ... -->
</ul>

As variantes .gap-{size}@{breakpoint}, .gap-y-{size}@{breakpoint} e .gap-x-{size}@{breakpoint} ajustam o gap em um breakpoint específico:

<ul class="flex flex-wrap gap-sm gap-md@md">
  <!-- ... -->
</ul>