# Gap (separación entre elementos)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/gap.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Utilidades · Espaciado

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.

11

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

8

## Ocho breakpoints
Las tres familias admiten variantes desde 640px hasta 6016px.

i

## El contenedor define el contexto
`gap` sólo separa hijos directos. Activa primero un layout con `.display-flex`, `.grid` o `.display-grid`.

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.

HTML

Resultado aplicado  Ambos ejes · 16px

Separación real

A  B  C  D  E  F

.g-16 aplica 16px tanto entre columnas como entre filas.

```html
<div class="grid grid-col-3 g-16">
  <span>A</span><span>B</span><span>C</span>
  <span>D</span><span>E</span><span>F</span>
</div>
```

.gx-32 modifica column-gap; las filas permanecen sin separación adicional.

```html
<div class="grid grid-col-3 gx-32">
  <span>A</span><span>B</span><span>C</span>
  <span>D</span><span>E</span><span>F</span>
</div>
```

.gy-32 modifica row-gap; las columnas permanecen sin separación adicional.

```html
<div class="grid grid-col-3 gy-32">
  <span>A</span><span>B</span><span>C</span>
  <span>D</span><span>E</span><span>F</span>
</div>
```

La clase base se aplica siempre; .g-1024-32 la reemplaza cuando el viewport alcanza 1024px.

```html
<div class="grid grid-col-3 g-8 g-1024-32">
  <span>A</span><span>B</span><span>C</span>
  <span>D</span><span>E</span><span>F</span>
</div>
```

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`.

`640` min-width  .g-640-32

`768` min-width  .g-768-32

`1024` min-width  .g-1024-32

`1280` min-width  .g-1280-32

`1536` min-width  .g-1536-32

`2560` min-width  .g-2560-32

`3840` min-width  .g-3840-32

`6016` min-width  .g-6016-32

HTML

```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 |

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

Recomendaciones

## Buenas prácticas de espaciado

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

02
### Base antes de responsive
Define primero el espacio móvil y añade sólo los cambios necesarios por breakpoint.

03
### Un eje cuando corresponda
Usa `.gx-*` o `.gy-*` sólo si los ejes realmente necesitan ritmos distintos.

04
### Escala del sistema
Elige el valor más cercano de la escala en lugar de introducir separaciones arbitrarias.