Flexbox y Grid
Utilidades para controlar los canales (gutters) entre elementos de cuadrícula y flexbox.
| Clase | Estilos |
|---|---|
gap-<number> | gap: calc(var(--spacing) * <value>); |
gap-(<custom-property>) | gap: var(<custom-property>); |
gap-[<value>] | gap: <value>; |
gap-x-<number> | column-gap: calc(var(--spacing) * <value>); |
gap-x-(<custom-property>) | column-gap: var(<custom-property>); |
gap-x-[<value>] | column-gap: <value>; |
gap-y-<number> | row-gap: calc(var(--spacing) * <value>); |
gap-y-(<custom-property>) | row-gap: var(<custom-property>); |
gap-y-[<value>] | row-gap: <value>; |
Utiliza utilidades gap-<number> como gap-2 y gap-4 para cambiar el espacio entre filas y columnas en diseños de cuadrícula (grid) y flexbox:
<div class="grid grid-cols-2 gap-4"> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>Utiliza utilidades gap-x-<number> o gap-y-<number> como gap-x-8 y gap-y-4 para cambiar el espacio entre columnas y filas de forma independiente:
<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>Usa utilidades como gap-[<value>],gap-x-[<value>], y gap-y-[<value>] para establecer el/la gap basándose 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 añade la función var() por ti automáticamente.
Antepone a las utilidades gap,column-gap, y row-gap el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<div class="grid gap-4 md:gap-6 ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.