Propriedade de Posicionamento de Coluna do Grid
Última atualização: 2026-09-13
grid-column Propriedade de Posicionamento de Coluna do Grid
grid-column é o atalho para grid-column-start e grid-column-end. Ele posiciona um item do grid na direção horizontal. Ao especificar os números das linhas de grade inicial e final, você controla quantas colunas o item abrange. É uma propriedade chave para construir layouts de grid flexíveis.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
grid-column: <grid-line> [ / <grid-line> ]?;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<grid-line> / <grid-line> | Valor | Posicionamento de coluna do grid |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-column | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： A palavra-chave span especifica o número de trilhas a cobrir: grid-column: span 2 abrange duas colunas.
Dica： As linhas da grade são numeradas a partir de 1, sendo a linha 1 a mais à esquerda. Números negativos contam a partir da direita, e -1 é a linha mais à direita.
❓ Perguntas Frequentes
QQual é a diferença entre grid-column: 1 / 3 e 1 / span 2?
ANa maioria dos casos produzem o mesmo resultado: 1 / 3 significa da linha 1 à linha 3, enquanto span 2 significa começar na linha 1 e cobrir duas trilhas. A diferença aparece quando a estrutura do grid muda: span conta trilhas, então permanece robusto, enquanto uma linha final codificada pode desalinharse quando colunas são adicionadas. Prefira span quando o número de trilhas a cobrir é conhecido.
QOs itens do grid podem se sobrepor?
ASim. Vários itens do grid podem ser colocados na mesma área do grid e se sobrepor, com z-index controlando qual fica no topo. Essa é a base para layouts estilo revista, rótulos empilhados e outros efeitos em camadas. Por padrão, o algoritmo de posicionamento automático nunca sobrepõe itens; a sobreposição só acontece quando pelo menos um item é posicionado explicitamente com as mesmas linhas da grade, então trate-a como um recurso intencional. Mas a sobreposição esconde o conteúdo e bloqueia cliques, então verifique se o conteúdo permanece acessível e evite sobreposição acidental em layouts comuns.
QComo leio grid-column: span 2 com apenas um valor?
ACom um único valor, a linha não especificada assume o padrão auto e o algoritmo de posicionamento automático do navegador encontra uma posição para o item, que então abrange o número dado de trilhas. grid-column: span 2 significa “coloque na próxima posição disponível e abranja duas colunas”, enquanto grid-column: 1 / span 2 começa explicitamente na linha 1. A forma com span permanece estável quando as linhas da grade são renumeradas.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Posicionamento de Linha do Grid
Posiciona um item do grid verticalmente
Atalho de Área do Grid
Atalho que posiciona um item em linhas e colunas de uma vez
