¿Para qué sirve la propiedad gap (o grid-gap) en Flexbox y Grid?

La propiedad gap en CSS (que anteriormente se conocía como grid-gap cuando solo se aplicaba a CSS Grid) es una forma de definir el espacio o «canalón» (gutter) entre los elementos hijos de un contenedor, tanto en CSS Grid como en CSS Flexbox.

Su principal utilidad es crear espaciado entre los elementos o pistas de manera sencilla y predecible, sin tener que recurrir a márgenes en los propios elementos, lo que a menudo complicaba la gestión de los espacios en los bordes del contenedor o entre el primer y último hijo.

Funcionamiento en CSS Grid:

En un contenedor Grid (display: grid;), gap es una propiedad abreviada que puede controlar el espacio entre las filas (row-gap) y entre las columnas (column-gap).

• Si especificas un solo valor: gap: 20px; Esto aplicará un espacio de 20px tanto entre las filas como entre las columnas de la cuadrícula.
• Si especificas dos valores: gap: 10px 20px; El primer valor (10px) se aplicará al row-gap (espacio entre filas), y el segundo valor (20px) se aplicará al column-gap (espacio entre columnas).

.grid-contenedor {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Tres columnas de igual ancho */
  /* Define un espacio de 15px entre filas y 10px entre columnas */
  gap: 15px 10px;
}Lenguaje del código: PHP (php)

El espacio definido por gap se crea únicamente entre las pistas de la cuadrícula, no entre los bordes exteriores del contenedor y las pistas adyacentes a estos bordes.

Funcionamiento en CSS Flexbox:

En un contenedor Flexbox (display: flex;), gap también define el espacio entre los elementos flexibles.

• Si flex-direction es row (o row-reverse), gap especifica el espaciado horizontal entre los elementos.
• Si flex-direction es column (o column-reverse), gap especifica el espaciado vertical entre los elementos.
• Si flex-wrap está establecido a wrap (o wrap-reverse) y los elementos se distribuyen en múltiples líneas, gap también controlará el espaciado entre estas líneas (actuando como row-gap para las líneas y column-gap para los elementos dentro de la línea).

.flex-contenedor {
  display: flex;
  flex-wrap: wrap; /* Permite que los ítems pasen a la siguiente línea */
  /* Define un espacio de 10px tanto horizontalmente entre ítems
     como verticalmente entre las líneas de ítems */
  gap: 10px;
}Lenguaje del código: PHP (php)

Ventajas de usar gap:

• Código más limpio: Simplifica la creación de espaciados en comparación con el uso de márgenes en los ítems, que a menudo requiere seleccionar el primer/último hijo para eliminar márgenes no deseados.
• Consistencia: Proporciona una forma unificada de gestionar el espaciado en Grid y Flexbox.

Aunque grid-gap (junto con grid-row-gap y grid-column-gap) fue la sintaxis original para Grid, la propiedad gap (y sus correspondientes row-gap y column-gap) es la estándar actual y se prefiere porque también es compatible con Flexbox.