CSS: “grid-column”: X no es un valor de “grid-column”.

La propiedad grid-column es un atajo para grid-column-start y grid-column-end. Define dónde se coloca un elemento de grid horizontalmente dentro de un layout CSS Grid. El validador comprueba que los atributos style inline y los bloques <style> contengan CSS válido, y marcará cualquier valor que no se ajuste a la gramática de la propiedad.

Por qué ocurre esto

Varios tipos de valores inválidos pueden desencadenar este error:

• Usar 0 como número de línea. Las líneas de CSS Grid están indexadas desde 1. La línea 0 no existe, por lo que valores como grid-column: 0, grid-column: 0 / 3, o grid-column: span 0 son todos inválidos.
• Erratas o palabras clave no reconocidas. Valores como grid-column: center o grid-column: full no son válidos a menos que coincidan con líneas de grid nombradas que hayas definido explícitamente.
• Sintaxis de atajo malformada. Omitir el separador /, usar comas en su lugar, o proporcionar demasiados valores causará un error de análisis.
• Usar span incorrectamente. La palabra clave span debe ir seguida de un entero positivo o una línea nombrada, ej., span 2. Escribir span -1 o span 0 es inválido.

Sintaxis válida

El atajo grid-column acepta:

grid-column: <grid-line> / <grid-line>;

Cada <grid-line> puede ser:

• Un entero positivo o negativo (pero no 0) que representa un número de línea de grid
• Una línea de grid nombrada (ej., content-start)
• La palabra clave span seguida de un entero positivo o un nombre (ej., span 2)
• auto

Si solo se proporciona un valor (sin /), la línea final toma el valor por defecto auto.

Por qué importa

Los valores CSS inválidos son ignorados por los navegadores, lo que significa que el elemento de grid recurrirá a la colocación automática. Esto puede causar cambios inesperados en el layout. Asegurar valores válidos mejora el cumplimiento de estándares, hace tu layout predecible entre navegadores, y previene fallos silenciosos que son difíciles de depurar.

Ejemplos

❌ Inválido: usar 0 como número de línea

<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
  <div style="grid-column: 0 / 3;">Item</div>
</div>

Las líneas de grid empiezan en 1, por lo que 0 no es un número de línea válido.

✅ Corregido: usar un número de línea válido

<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
  <div style="grid-column: 1 / 3;">Item</div>
</div>

❌ Inválido: palabra clave no reconocida

<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
  <div style="grid-column: full;">Item</div>
</div>

El valor full no es un valor de línea de grid válido a menos que sea una línea nombrada definida en la plantilla de grid.

✅ Corregido: usar span para cubrir todas las columnas

<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
  <div style="grid-column: 1 / -1;">Item</div>
</div>

Usar -1 se refiere a la última línea de grid, abarcando efectivamente todas las columnas.

❌ Inválido: span 0

<div style="display: grid; grid-template-columns: repeat(4, 1fr);">
  <div style="grid-column: span 0;">Item</div>
</div>

La palabra clave span requiere un entero positivo. 0 no es válido.

✅ Corregido: usar un valor span positivo

<div style="display: grid; grid-template-columns: repeat(4, 1fr);">
  <div style="grid-column: span 2;">Item</div>
</div>

❌ Inválido: sintaxis malformada con una coma

<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
  <div style="grid-column: 1, 3;">Item</div>
</div>

✅ Corregido: usar el separador /

<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
  <div style="grid-column: 1 / 3;">Item</div>
</div>

Las líneas de inicio y final deben separarse con /, no con una coma.

Referencia rápida de patrones válidos

Valor	Significado
grid-column: 2	Empezar en línea 2, terminar en auto
grid-column: 2 / 5	Empezar en línea 2, terminar en línea 5
grid-column: 1 / -1	Abarcar desde la primera hasta la última línea
grid-column: span 3	Abarcar 3 columnas desde el inicio auto-colocado
grid-column: 2 / span 3	Empezar en línea 2, abarcar 3 columnas
grid-column: auto / auto	Colocación completamente automática

En caso de duda, comprueba que cada valor numérico sea un entero distinto de cero y que el formato general use / para separar los valores de inicio y final.

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Iniciar prueba gratuita Ver precios