gap

gap crea espacio entre los ítems de un contenedor flex o grid. Es la forma moderna y limpia de separar elementos: a diferencia de usar margin en cada ítem, gap sabe que el espacio debe existir solo en los huecos internos — nunca antes del primer ítem ni después del último. Esto elimina el problema clásico del “margin que sobra en el primer o último elemento”, que antes requería selectores :first-child/:last-child para corregir.

En Flexbox, gap funciona en ambas direcciones simultáneamente: separa los ítems entre sí a lo largo del eje principal y también separa las líneas entre sí cuando hay flex-wrap: wrap. Con un solo valor, el mismo espacio aplica en ambas dimensiones; con dos valores, el primero controla el espacio entre filas (row-gap) y el segundo entre columnas (column-gap).

gap es una propiedad compartida con CSS Grid (CAT-26). El mismo mecanismo y los mismos valores funcionan en ambos contextos. Esta página cubre el uso en Flexbox; cuando se documente Grid, se volverá a mencionar allí.

Cómo funciona

gap es un shorthand de dos propiedades individuales: row-gap y column-gap. El navegador las aplica como espaciado mínimo garantizado entre ítems — si justify-content distribuye espacio adicional, ese espacio se suma al gap, no lo reemplaza.

row-gap y column-gap

row-gap controla el espacio entre filas (entre líneas cuando hay flex-wrap: wrap). column-gap controla el espacio entre ítems a lo largo del eje principal (entre columnas en row, entre filas en column).

En un contenedor flex con flex-direction: row y flex-wrap: nowrap (la configuración más común), solo hay una dimensión que importa: column-gap separa los ítems en la fila. row-gap solo tiene efecto cuando hay múltiples filas.

Sintaxis

/* Un valor: row-gap y column-gap iguales */
.contenedor {
  display: flex;
  gap: 16px;
}

/* Dos valores: row-gap column-gap */
.contenedor {
  gap: 24px 16px;  /* 24px entre filas, 16px entre columnas */
}

/* Propiedades individuales */
.contenedor {
  row-gap: 24px;
  column-gap: 16px;
}

Valores

Longitudes (px, em, rem, %)

Cualquier unidad de longitud CSS. px es el más común. % es relativo al tamaño del contenedor en el eje correspondiente.

0 (valor por defecto)

Sin espacio entre ítems. Es el comportamiento base — los ítems se tocan entre sí.

gap vs margin — la diferencia clave

La diferencia conceptual es importante:

Con margin, si se usa margin-right: 16px en todos los ítems, el último ítem tiene un margen derecho que sobra. La solución clásica era :last-child { margin-right: 0 }. Con gap, no hay ese problema: el espacio existe solo entre ítems, nunca en los bordes.

/* ❌ El viejo truco con margin (necesita fix para el último) */
.item {
  margin-right: 16px;
}
.item:last-child {
  margin-right: 0;
}

/* ✅ Con gap — limpio y sin hacks */
.contenedor {
  display: flex;
  gap: 16px;
}

Uso en Grid

gap funciona exactamente igual en CSS Grid. La semántica es idéntica: espacio entre ítems (entre celdas) sin espacio en los bordes. En Grid, row-gap y column-gap controlan el espacio entre filas y entre columnas de la cuadrícula respectivamente. El desarrollo completo de gap en Grid se cubre en la tanda de Grid (CAT-26).

Ejemplo realista

/* Navegación horizontal con separación */
.nav {
  display: flex;
  gap: 8px;
}

/* Galería con separación diferente entre filas y columnas */
.galeria {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 16px;  /* 24px entre filas, 16px entre columnas */
}

Cuándo usarlo

Usá gap siempre que necesites espacio uniforme entre los ítems de un contenedor flex o grid. Reemplaza el patrón margin + :first-child/:last-child que se usaba antes.

Notas, gotchas e interacción

• gap solo separa entre ítems, no en los bordes. Si necesitás espacio en los bordes del contenedor (entre los ítems y el borde del contenedor), usá padding en el contenedor.
• Nombres anteriores: grid-gap, grid-row-gap, grid-column-gap. Estos nombres están deprecados pero algunos los ven en código legado. Hoy se usa gap, row-gap, column-gap sin el prefijo grid-.
• gap y justify-content se suman. gap define un mínimo de separación; justify-content: space-between distribuye el espacio libre adicional. No se reemplazan — coexisten.
• % en gap es experimental. El comportamiento de gap con porcentajes en Flexbox varía entre navegadores. Mejor usar unidades absolutas o relativas a la fuente.
• row-gap no tiene efecto con flex-wrap: nowrap. Si todos los ítems están en una sola línea, no hay filas adicionales y row-gap no cambia nada.

Vigente / legacy

gap (antes grid-gap) tiene soporte amplio desde 2020 en los navegadores modernos. La propiedad evolucionó de ser específica de Grid a ser compartida con Flexbox. No se necesitan prefijos de vendor en proyectos modernos. Los nombres legacy grid-gap/grid-row-gap/grid-column-gap siguen siendo reconocidos pero se desaconseja su uso en código nuevo.