Validación HTML: CSS: "gap": "auto" no es un valor válido para "gap".

Acerca de este problema HTML

La propiedad gap es un shorthand para row-gap y column-gap, utilizada en CSS Grid, Flexbox, y layouts multicolumna para definir el espaciado entre elementos o tracks. Según la especificación CSS Box Alignment, los valores aceptados para gap son valores de longitud (px, em, rem, %, vh, etc.), la palabra clave normal, o la función calc(). La palabra clave auto — aunque válida para muchas otras propiedades CSS como margin, width, y grid-template-columns — simplemente no forma parte de la gramática de valores de la propiedad gap.

Esta confusión surge frecuentemente porque los desarrolladores están acostumbrados a usar auto para el espaciado en otros contextos. Por ejemplo, margin: auto es una técnica común de centrado, y auto se usa ampliamente en el dimensionamiento de tracks de grid. Sin embargo, la propiedad gap tiene un propósito diferente: define un tamaño de canalón fijo o calculado entre elementos, y auto no tiene un significado definido en ese contexto.

Por qué es importante

Cumplimiento de estándares: Usar un valor inválido significa que el navegador ignorará toda la declaración gap, volviendo al valor por defecto de normal (que típicamente es 0px en Grid y Flexbox). Esto puede llevar a resultados de layout inesperados donde los elementos no tienen espaciado alguno.
Consistencia entre navegadores: Aunque algunos navegadores pueden ser permisivos con valores CSS inválidos, otros los descartarán estrictamente. Esto crea layouts inconsistentes entre diferentes navegadores y versiones.
Mantenibilidad: Los valores CSS inválidos pueden ocultar la intención del desarrollador, haciendo más difícil para otros (o tu futuro yo) entender qué espaciado se deseaba.

Cómo solucionarlo

Reemplaza auto con un valor válido para gap:

Una longitud específica: gap: 16px;, gap: 1rem;, gap: 0.5em;
Un porcentaje: gap: 2%;
La palabra clave normal: gap: normal; (se resuelve a 0px en Flexbox y Grid)
Una expresión calc(): gap: calc(1rem + 4px);
Dos valores para fila y columna por separado: gap: 16px 24px;

Si estabas usando auto porque querías que el navegador determinara el espaciado dinámicamente, considera usar un valor de porcentaje, una unidad relativa al viewport (vw, vh), o CSS clamp() para canalones responsivos.

Ejemplos

Incorrecto: usar `auto` como valor de `gap`

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: auto;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Esto desencadena el error de validación porque auto no es un valor válido para gap. El navegador descartará la declaración completamente.

Correcto: usar una longitud fija

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Correcto: usar gaps separados para fila y columna

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Correcto: usar un porcentaje para espaciado responsivo

<div style="display: flex; flex-wrap: wrap; gap: 2%;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Correcto: usar `clamp()` para gaps responsivos fluidos

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 2vw, 32px);">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Este enfoque te da un gap que escala con el ancho del viewport, limitado entre 8px y 32px — una alternativa útil si estabas buscando usar auto para obtener comportamiento de espaciado flexible.