gap

Ejemplos

Ejemplo básico

Usa utilidades gap-<number> como gap-2 y gap-4 para cambiar el espacio entre filas y columnas en diseños de cuadrícula y flexbox:

<div class="grid grid-cols-2 gap-4">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

Cambiando los espacios de fila y columna independientemente

Usa utilidades gap-x-<number> o gap-y-<number> como gap-x-8 y gap-y-4 para cambiar el espacio entre columnas y filas independientemente:

<div class="grid grid-cols-3 gap-x-8 gap-y-4">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

Usando un valor personalizado

Usa utilidades como gap-[<value>],gap-x-[<value>], y gap-y-[<value>] para establecer el gap basado en un valor completamente personalizado:

<div class="gap-[10vw] ...">
  <!-- ... -->
</div>

Para variables CSS, también puedes usar la sintaxis gap-(<custom-property>) :

<div class="gap-(--my-gap) ...">
  <!-- ... -->
</div>

Esto es solo un atajo para gap-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive design

Prefija gap,column-gap, y row-gap utilidades con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

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

Aprende más sobre el uso de variantes en la documentación de variantes.