Validación HTML: CSS: "grid-template-rows": X no es un valor de "grid-template-rows" válido.

Acerca de este problema HTML

La propiedad grid-template-rows define el tamaño de cada fila en un layout de grid CSS. El validador W3C verifica que cada valor en la declaración se ajuste a la especificación CSS Grid. Cuando ves este error, el validador ha encontrado algo que no puede analizar como un tamaño de pista válido.

Las causas comunes de este error incluyen:

Errores tipográficos o unidades inválidas — escribir 100 px (con un espacio), 100pixels, o 1 fr en lugar de 1fr.
Usar valores de otras propiedades — por ejemplo, flex, inline o space-between no son tamaños de pista de fila válidos.
Sintaxis de función incorrecta — falta de comas en repeat(), proporcionar argumentos incorrectos a minmax(), o usar funciones no soportadas.
Falta de unidades — escribir un número simple como 100 en lugar de 100px (cero es el único número que no requiere una unidad).
Usar sintaxis más nueva aún no reconocida — algunas características de vanguardia como subgrid o el valor masonry pueden activar advertencias de validación dependiendo del nivel de especificación soportado por el validador.

La propiedad grid-template-rows acepta estos tipos de valor válidos:

Valores de longitud: 100px, 5em, 10rem, 20vh
Porcentajes: 50%, 33.3%
Longitudes flexibles: 1fr, 2fr
Palabras clave: auto, min-content, max-content, none
Funciones: repeat(), minmax(), fit-content()
Líneas con nombre: [row-start] 100px [row-end]

Esto es importante para el cumplimiento de estándares y la compatibilidad futura. Aunque los navegadores pueden ser permisivos e ignorar valores inválidos, depender de ese comportamiento puede llevar a layouts que se rompan silenciosamente. CSS válido asegura que tu grid se comporte de manera predecible en todos los navegadores.

Ejemplos

Incorrecto — valores inválidos

<style>
  /* ERROR: "full" no es un tamaño de pista válido */
  .grid-a {
    display: grid;
    grid-template-rows: full auto;
  }

  /* ERROR: espacio entre número y unidad */
  .grid-b {
    display: grid;
    grid-template-rows: 100 px 200 px;
  }

  /* ERROR: número simple sin una unidad */
  .grid-c {
    display: grid;
    grid-template-rows: 100 200;
  }

  /* ERROR: falta coma en repeat() */
  .grid-d {
    display: grid;
    grid-template-rows: repeat(3 1fr);
  }
</style>

Correcto — tamaños de pista válidos

<style>
  /* Alturas fijas en píxeles */
  .grid-a {
    display: grid;
    grid-template-rows: 100px auto;
  }

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

  /* Función repeat con sintaxis correcta */
  .grid-c {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
  }

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

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

Usando `fit-content()` y líneas con nombre

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

Si tu valor parece correcto pero el validador aún lo marca, verifica si estás usando una característica CSS muy nueva como subgrid o masonry. Estas pueden no estar reconocidas aún por el validador incluso si algunos navegadores las soportan. En ese caso, la advertencia puede ser reconocida mientras mantienes el valor intencionalmente.