CSS: “grid-column”: X não é um valor de “grid-column”.

A propriedade grid-column é uma abreviação para grid-column-start e grid-column-end. Define onde um item da grelha é posicionado horizontalmente dentro de um layout CSS Grid. O validador verifica se os atributos style inline e os blocos <style> contêm CSS válido, e irá sinalizar qualquer valor que não esteja em conformidade com a gramática da propriedade.

Porque isto acontece

Vários tipos de valores inválidos podem desencadear este erro:

• Usar 0 como número de linha. As linhas CSS Grid são indexadas a partir de 1. A linha 0 não existe, pelo que valores como grid-column: 0, grid-column: 0 / 3, ou grid-column: span 0 são todos inválidos.
• Gralhas ou palavras-chave não reconhecidas. Valores como grid-column: center ou grid-column: full não são válidos a menos que correspondam a linhas de grelha nomeadas que você definiu explicitamente.
• Sintaxe de abreviação malformada. Omitir o separador /, usar vírgulas em seu lugar, ou fornecer demasiados valores causará um erro de análise.
• Usar span incorretamente. A palavra-chave span deve ser seguida por um número inteiro positivo ou uma linha nomeada, por exemplo, span 2. Escrever span -1 ou span 0 é inválido.

Sintaxe válida

A abreviação grid-column aceita:

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

Cada <grid-line> pode ser:

• Um número inteiro positivo ou negativo (mas não 0) representando um número de linha da grelha
• Uma linha de grelha nomeada (por exemplo, content-start)
• A palavra-chave span seguida por um número inteiro positivo ou um nome (por exemplo, span 2)
• auto

Se apenas um valor for fornecido (sem /), a linha final assume o valor padrão auto.

Porque é importante

Valores CSS inválidos são ignorados pelos navegadores, o que significa que o item da grelha recorrerá ao posicionamento automático. Isto pode causar mudanças de layout inesperadas. Garantir valores válidos melhora a conformidade com os padrões, torna o seu layout previsível em diferentes navegadores, e previne falhas silenciosas que são difíceis de debuggar.

Exemplos

❌ Inválido: Usar 0 como número de linha

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

As linhas da grelha começam em 1, pelo que 0 não é um número de linha válido.

✅ Corrigido: Usar um número de linha válido

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

❌ Inválido: Palavra-chave não reconhecida

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

O valor full não é um valor de linha da grelha válido a menos que seja uma linha nomeada definida no template da grelha.

✅ Corrigido: Usar span para cobrir todas as colunas

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

Usar -1 refere-se à última linha da grelha, abrangendo efetivamente todas as colunas.

❌ Inválido: span 0

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

A palavra-chave span requer um número inteiro positivo. 0 não é válido.

✅ Corrigido: Usar um valor de span positivo

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

❌ Inválido: Sintaxe malformada com vírgula

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

✅ Corrigido: Usar o separador /

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

As linhas de início e fim devem ser separadas por /, não por vírgula.

Referência rápida de padrões válidos

Valor	Significado
grid-column: 2	Começar na linha 2, terminar em auto
grid-column: 2 / 5	Começar na linha 2, terminar na linha 5
grid-column: 1 / -1	Abranger da primeira à última linha
grid-column: span 3	Abranger 3 colunas a partir do início posicionado automaticamente
grid-column: 2 / span 3	Começar na linha 2, abranger 3 colunas
grid-column: auto / auto	Posicionamento totalmente automático

Na dúvida, verifique se cada valor numérico é um número inteiro diferente de zero e se o formato geral usa / para separar os valores de início e fim.

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Iniciar teste gratuito Ver preços