Verificação HTML: CSS: "gap": "auto" não é um valor válido para "gap".

Sobre este problema HTML

A propriedade gap é uma forma abreviada de row-gap e column-gap, usada em CSS Grid, Flexbox e layouts de múltiplas colunas para definir o espaçamento entre itens ou faixas. De acordo com a especificação CSS Box Alignment, os valores aceites para gap são valores de comprimento (px, em, rem, %, vh, etc.), a palavra-chave normal, ou a função calc(). A palavra-chave auto — embora válida para muitas outras propriedades CSS como margin, width e grid-template-columns — simplesmente não faz parte da gramática de valores da propriedade gap.

Esta confusão surge frequentemente porque os programadores estão habituados a usar auto para espaçamento noutros contextos. Por exemplo, margin: auto é uma técnica comum de centralização, e auto é amplamente usado no dimensionamento de faixas de grid. No entanto, a propriedade gap serve um propósito diferente: define um tamanho fixo ou calculado para o espaçamento entre itens, e auto não tem significado definido nesse contexto.

Por que isso importa

Conformidade com os padrões: Usar um valor inválido significa que o navegador irá ignorar toda a declaração gap, recorrendo ao valor predefinido de normal (que é tipicamente 0px em Grid e Flexbox). Isto pode levar a resultados de layout inesperados onde os itens não têm espaçamento algum.
Consistência entre navegadores: Embora alguns navegadores possam ser permissivos com valores CSS inválidos, outros irão descartá-los estritamente. Isto cria layouts inconsistentes entre diferentes navegadores e versões.
Manutenibilidade: Valores CSS inválidos podem mascarar a intenção do programador, tornando mais difícil para outros (ou para si mesmo no futuro) entender que espaçamento era desejado.

Como corrigir

Substitua auto por um valor válido para gap:

Um comprimento específico: gap: 16px;, gap: 1rem;, gap: 0.5em;
Uma percentagem: gap: 2%;
A palavra-chave normal: gap: normal; (resolve para 0px em Flexbox e Grid)
Uma expressão calc(): gap: calc(1rem + 4px);
Dois valores para linha e coluna separadamente: gap: 16px 24px;

Se estava a usar auto porque queria que o navegador determinasse o espaçamento dinamicamente, considere usar um valor percentual, uma unidade relativa ao viewport (vw, vh), ou CSS clamp() para espaçamentos responsivos.

Exemplos

Incorreto: 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>

Isto desencadeia o erro de validação porque auto não é um valor válido para gap. O navegador irá descartar a declaração completamente.

Correto: usar um comprimento fixo

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

Correto: usar espaçamentos separados para linhas e colunas

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

Correto: usar uma percentagem para espaçamento responsivo

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

Correto: usar `clamp()` para espaçamentos 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>

Esta abordagem dá-lhe um espaçamento que escala com a largura do viewport, limitado entre 8px e 32px — uma alternativa útil se estava a procurar auto para obter comportamento de espaçamento flexível.