Utilidades · Espaciado

Gap (separación entre elementos)

Controla el espacio entre hijos de un contenedor flex o grid sin añadir márgenes individuales a cada elemento.

v2.0

Tres direcciones

.g-* controla ambos ejes, .gx-* columnas y .gy-* filas.

Escala compartida

Once valores desde 0px hasta 96px mantienen el ritmo espacial del sistema.

Ocho breakpoints

Las tres familias admiten variantes desde 640px hasta 6016px.

Código + resultado

Compara los tres ejes de separación

El mismo grupo de elementos permite distinguir cuándo cambia toda la cuadrícula, sólo las columnas o sólo las filas.

Separación real

ABCDEF

Mapa del sistema

Elige la familia según el eje

Las tres familias comparten la misma escala; sólo cambia la propiedad CSS que controlan.

.g-{valor}Dos ejes

Separación general

Aplica gap. Es la opción habitual cuando filas y columnas usan la misma distancia.

Ejemplo: .g-24

.gx-{valor}Eje horizontal

Separación entre columnas

Aplica column-gap. Úsala cuando el ritmo horizontal difiere del vertical.

Ejemplo: .gx-24

.gy-{valor}Eje vertical

Separación entre filas

Aplica row-gap. Es útil en listas, formularios y grupos apilados.

Ejemplo: .gy-24

Escala

Once valores disponibles

Cada muestra aplica la clase real .g-{valor}. La distancia violeta representa el espacio que queda entre ambos elementos.

.g-0 0px

.g-4 4px

.g-8 8px

.g-12 12px

.g-16 16px

.g-24 24px

.g-32 32px

.g-40 40px

.g-48 48px

.g-64 64px

.g-96 96px

Reset.g-none elimina el espacio en ambos ejes. .g-0, .gx-0 y .gy-0 expresan el mismo valor dentro de cada familia.

Variantes responsivas

Ocho puntos de activación

Inserta el breakpoint entre la familia y el valor: .g-1024-32, .gx-1280-24 o .gy-768-16.

640min-width.g-640-32

768min-width.g-768-32

1024min-width.g-1024-32

1280min-width.g-1280-32

1536min-width.g-1536-32

2560min-width.g-2560-32

3840min-width.g-3840-32

6016min-width.g-6016-32

HTML

<div class="grid grid-col-2 g-8 g-768-16 g-1280-32">
  <article>Contenido</article>
  <article>Contenido</article>
</div>

El contenedor comienza con 8px, pasa a 16px desde 768px y a 32px desde 1280px.

Referencia

Clases disponibles

Todas las familias de clases aceptan los valores 0, 4, 8, 12, 16, 24, 32, 40, 48, 64 y 96.

Clases	Propiedad	Qué separa	Ejemplo
`.g-{valor}`	`gap`	Filas y columnas.	`.g-16`
`.gx-{valor}`	`column-gap`	Columnas, eje horizontal.	`.gx-24`
`.gy-{valor}`	`row-gap`	Filas, eje vertical.	`.gy-32`
`.g-none`	`gap: 0`	Elimina toda separación.	`.g-none`
`.g-{bp}-{valor}`	`gap`	Ambos ejes desde el breakpoint.	`.g-1024-32`
`.gx-{bp}-{valor}`	`column-gap`	Columnas desde el breakpoint.	`.gx-1280-24`
`.gy-{bp}-{valor}`	`row-gap`	Filas desde el breakpoint.	`.gy-768-16`

ResponsiveLas variantes existen para ocho breakpoints: 640, 768, 1024, 1280, 1536, 2560, 3840 y 6016.

Recomendaciones

Buenas prácticas de espaciado

Gap para relaciones

Usa gap entre elementos hermanos; reserva margin para separar un componente de su entorno.

Base antes de responsive

Define primero el espacio móvil y añade sólo los cambios necesarios por breakpoint.

Un eje cuando corresponda

Usa .gx-* o .gy-* sólo si los ejes realmente necesitan ritmos distintos.

Escala del sistema

Elige el valor más cercano de la escala en lugar de introducir separaciones arbitrarias.