Verificação HTML: CSS: "grid-template-columns": X não é um valor "grid-template-columns".

Sobre este problema HTML

A propriedade grid-template-columns define os tamanhos das faixas de colunas de um contêiner de grelha CSS. Quando o validador W3C reporta que um determinado valor “não é um valor grid-template-columns“, significa que o parser encontrou algo que não consegue interpretar como um tamanho de faixa válido ou uma listagem de faixas.

Este erro pode ser desencadeado por muitos erros comuns: um erro de digitação simples (como auто em vez de auto), usar uma propriedade personalizada CSS (o validador pode não resolver referências var()), esquecer unidades num valor de comprimento (ex., 100 em vez de 100px), usar termos semelhantes ao JavaScript (ex., undefined ou null), ou usar sintaxe mais recente que o parser CSS do validador ainda não suporta.

Embora os navegadores sejam geralmente tolerantes e simplesmente ignorem uma declaração grid-template-columns inválida, isto significa que o seu layout de grelha quebra silenciosamente — o contêiner não formará uma grelha como pretendido, e o conteúdo pode empilhar numa única coluna. Corrigir erros de validação garante que o seu layout funciona de forma previsível em todos os navegadores e torna as suas folhas de estilo mais fáceis de manter.

Valores válidos

A propriedade grid-template-columns aceita estes tipos de valor:

none — o padrão; nenhuma coluna de grelha explícita é definida.
Valores de comprimento e percentagem — px, em, rem, %, vh, vw, etc. (ex., 200px, 50%).
A unidade fr — distribui o espaço restante proporcionalmente (ex., 1fr 2fr).
Palavras-chave — auto, min-content, max-content.
A função repeat() — abreviação para padrões de faixas repetidas (ex., repeat(3, 1fr)).
A função minmax() — define um tamanho mínimo e máximo para uma faixa (ex., minmax(150px, 1fr)).
A função fit-content() — limita a faixa a um máximo dado (ex., fit-content(300px)).
Linhas de grelha nomeadas — definidas com parênteses retos (ex., [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end]).
Qualquer combinação dos acima.

Causas comuns

Erros de digitação ou palavras-chave inventadas — valores como undefined, inherit-grid, ou unidades mal escritas.
Unidades em falta — escrever 100 em vez de 100px. A unidade fr, px, e todas as outras unidades são obrigatórias (apenas 0 pode estar sem unidade).
Sintaxe de função inválida — vírgulas ou parênteses em falta em repeat() ou minmax().
Propriedades personalizadas CSS — var(--cols) pode desencadear avisos do validador porque o validador não consegue resolver a variável no momento da análise. Isto é tipicamente um falso positivo.

Exemplos

Incorreto: palavra-chave inválida

<style>
  .grid {
    display: grid;
    grid-template-columns: undefined;
  }
</style>

Incorreto: unidade em falta num comprimento

<style>
  .grid {
    display: grid;
    grid-template-columns: 200 1fr;
  }
</style>

Incorreto: sintaxe `repeat()` malformada

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(3 1fr);
  }
</style>

Correto: usando unidades `fr`

<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
</style>

Correto: misturando comprimentos, `fr`, e `auto`

<style>
  .grid {
    display: grid;
    grid-template-columns: 250px 1fr auto;
  }
</style>

Correto: usando `repeat()` e `minmax()`

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
</style>

Correto: linhas de grelha nomeadas com tamanhos de faixas

<style>
  .grid {
    display: grid;
    grid-template-columns: [sidebar] 240px [content] 1fr [aside] 200px;
  }
</style>

Se o validador sinalizar um uso de propriedade personalizada var() e você tem certeza de que a variável resolve para um valor válido em tempo de execução, o aviso pode geralmente ser desconsiderado — esta é uma limitação conhecida da validação CSS estática. Para todos os outros casos, verifique novamente a ortografia, garanta que cada valor numérico (exceto 0) tem uma unidade, e verifique que a sintaxe da função inclui as vírgulas e parênteses corretos.