Validación HTML: CSS: "grid-template-columns": X no es un valor de "grid-template-columns".

Acerca de este problema HTML

La propiedad grid-template-columns define los tamaños de las pistas de columna de un contenedor de grid CSS. Cuando el validador W3C informa que un valor particular “no es un valor de grid-template-columns“, significa que el analizador encontró algo que no puede interpretar como un tamaño de pista válido o una lista de pistas.

Este error puede ser desencadenado por muchos errores comunes: un simple error tipográfico (como auто en lugar de auto), usar una propiedad personalizada de CSS (el validador puede no resolver las referencias var()), olvidar unidades en un valor de longitud (ej., 100 en lugar de 100px), usar términos similares a JavaScript (ej., undefined o null), o usar una sintaxis más nueva que el analizador CSS del validador aún no soporta.

Aunque los navegadores son generalmente tolerantes y simplemente ignorarán una declaración de grid-template-columns inválida, esto significa que tu layout de grid se rompe silenciosamente — el contenedor no formará un grid como se pretende, y el contenido puede apilarse en una sola columna. Corregir los errores de validación asegura que tu layout funcione de manera predecible en todos los navegadores y hace que tus hojas de estilo sean más fáciles de mantener.

Valores válidos

La propiedad grid-template-columns acepta estos tipos de valores:

none — el predeterminado; no se definen columnas de grid explícitas.
Valores de longitud y porcentaje — px, em, rem, %, vh, vw, etc. (ej., 200px, 50%).
La unidad fr — distribuye el espacio restante proporcionalmente (ej., 1fr 2fr).
Palabras clave — auto, min-content, max-content.
La función repeat() — abreviatura para patrones de pistas repetidas (ej., repeat(3, 1fr)).
La función minmax() — establece un tamaño mínimo y máximo para una pista (ej., minmax(150px, 1fr)).
La función fit-content() — limita la pista a un máximo dado (ej., fit-content(300px)).
Líneas de grid con nombre — definidas con corchetes cuadrados (ej., [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end]).
Cualquier combinación de los anteriores.

Causas comunes

Errores tipográficos o palabras clave inventadas — valores como undefined, inherit-grid, o unidades mal escritas.
Unidades faltantes — escribir 100 en lugar de 100px. La unidad fr, px, y todas las otras unidades son obligatorias (solo 0 puede estar sin unidades).
Sintaxis de función inválida — comas o paréntesis faltantes en repeat() o minmax().
Propiedades personalizadas de CSS — var(--cols) puede desencadenar advertencias del validador porque el validador no puede resolver la variable en tiempo de análisis. Esto típicamente es un falso positivo.

Ejemplos

Incorrecto: palabra clave inválida

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

Incorrecto: unidad faltante en una longitud

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

Incorrecto: sintaxis de `repeat()` mal formada

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

Correcto: usando unidades `fr`

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

Correcto: mezclando longitudes, `fr`, y `auto`

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

Correcto: usando `repeat()` y `minmax()`

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

Correcto: líneas de grid con nombre y tamaños de pista

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

Si el validador marca el uso de una propiedad personalizada var() y estás seguro de que la variable se resuelve a un valor válido en tiempo de ejecución, la advertencia generalmente puede ser ignorada — esta es una limitación conocida de la validación estática de CSS. Para todos los otros casos, verifica la ortografía, asegúrate de que cada valor numérico (excepto 0) tenga una unidad, y verifica que la sintaxis de las funciones incluya las comas y paréntesis correctos.