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

Sobre este problema HTML

A propriedade grid-template-rows define o tamanho de cada linha num layout de grelha CSS. O validador W3C verifica que cada valor na declaração está em conformidade com a especificação CSS Grid. Quando vê este erro, o validador encontrou algo que não consegue analisar como um tamanho de faixa válido.

Causas comuns deste erro incluem:

Erros de escrita ou unidades inválidas — escrever 100 px (com um espaço), 100pixels, ou 1 fr em vez de 1fr.
Usar valores de outras propriedades — por exemplo, flex, inline, ou space-between não são tamanhos de faixa de linha válidos.
Sintaxe incorreta de função — vírgulas em falta em repeat(), fornecer argumentos errados para minmax(), ou usar funções não suportadas.
Unidades em falta — escrever um número isolado como 100 em vez de 100px (zero é o único número que não requer uma unidade).
Usar sintaxe mais recente ainda não reconhecida — algumas funcionalidades de ponta como subgrid ou o valor masonry podem desencadear avisos de validação dependendo do nível de especificação suportado pelo validador.

A propriedade grid-template-rows aceita estes tipos de valores válidos:

Valores de comprimento: 100px, 5em, 10rem, 20vh
Percentagens: 50%, 33.3%
Comprimentos flexíveis: 1fr, 2fr
Palavras-chave: auto, min-content, max-content, none
Funções: repeat(), minmax(), fit-content()
Linhas nomeadas: [row-start] 100px [row-end]

Isto é importante para a conformidade com normas e compatibilidade futura. Embora os navegadores possam ser permissivos e ignorar valores inválidos, confiar nesse comportamento pode levar a layouts que se quebram silenciosamente. CSS válido garante que a sua grelha se comporta de forma previsível em todos os navegadores.

Exemplos

Incorreto — valores inválidos

<style>
  /* ERRO: "full" não é um tamanho de faixa válido */
  .grid-a {
    display: grid;
    grid-template-rows: full auto;
  }

  /* ERRO: espaço entre número e unidade */
  .grid-b {
    display: grid;
    grid-template-rows: 100 px 200 px;
  }

  /* ERRO: número isolado sem uma unidade */
  .grid-c {
    display: grid;
    grid-template-rows: 100 200;
  }

  /* ERRO: vírgula em falta em repeat() */
  .grid-d {
    display: grid;
    grid-template-rows: repeat(3 1fr);
  }
</style>

Correto — tamanhos de faixa válidos

<style>
  /* Alturas fixas em pixels */
  .grid-a {
    display: grid;
    grid-template-rows: 100px auto;
  }

  /* Unidades flexíveis */
  .grid-b {
    display: grid;
    grid-template-rows: 1fr 2fr;
  }

  /* Função repeat com sintaxe correta */
  .grid-c {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
  }

  /* Minmax com auto */
  .grid-d {
    display: grid;
    grid-template-rows: minmax(100px, 1fr) auto;
  }
</style>

Exemplo completo funcional

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Grid template rows example</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-rows: 80px minmax(150px, 1fr) auto;
      gap: 8px;
      height: 400px;
    }
    .grid-container > div {
      background: #e0e0e0;
      padding: 16px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div>Row 1 — fixed 80px</div>
    <div>Row 2 — between 150px and 1fr</div>
    <div>Row 3 — auto-sized to content</div>
  </div>
</body>
</html>

Usar `fit-content()` e linhas nomeadas

<style>
  .grid {
    display: grid;
    grid-template-rows: [header] fit-content(100px) [main] 1fr [footer] auto;
  }
</style>

Se o seu valor parece correto mas o validador ainda o assinala, verifique se está a usar uma funcionalidade CSS muito recente como subgrid ou masonry. Estas podem ainda não ser reconhecidas pelo validador mesmo que alguns navegadores as suportem. Nesse caso, o aviso pode ser reconhecido mantendo o valor intencionalmente.