CSS: Itens Grid CSS

Última atualização: 2026-10-13

Propriedades de itens Grid permitem controlar com precisão como filhos individuais são posicionados dentro de um contêiner grid.

Propriedades nesta seção: grid-column grid-row grid-area justify-self align-self place-self justify-items align-items grid-template-areas

1. Propriedades de Itens Grid

(1) Referência Rápida

Propriedade	Valores	Finalidade
`grid-column`	`1 / 3`, `span 2`	Posicionamento de coluna
`grid-row`	`1 / 3`, `span 2`	Posicionamento de linha
`grid-area`	`header`, `1 / 2 / 3 / 4`	Área nomeada ou posicionamento de linha
`justify-self`	`start`, `end`, `center`, `stretch`	Alinhamento horizontal dentro da célula
`align-self`	`start`, `end`, `center`, `stretch`	Alinhamento vertical dentro da célula
`place-self`	`center`, `start end`	Abreviação para justify + align

2. grid-column e grid-row

Controlam onde itens começam e terminam no grid:

▶ Exemplo

▶ Experimente

(1) Item de Largura Total

Use grid-column: 1 / -1 para abranger todas as colunas:

▶ Exemplo

▶ Experimente

3. justify-self / align-self

Controlam alinhamento dentro de células individuais:

▶ Exemplo

▶ Experimente

4. Sobreposição de Grid

Itens Grid podem se sobrepor — itens posteriores aparecem no topo:

▶ Exemplo

▶ Experimente

Propriedades nesta seção: grid-column grid-row grid-area justify-self align-self place-self justify-items align-items grid-template-areas

❓ Perguntas Frequentes

P O que significa grid-column: 1 / -1?

R Significa "da linha de grid 1 até a última linha de grid (-1 é o número da última linha)" — abrangendo a linha inteira. Perfeito para cabeçalhos de largura total ou divisores sem precisar saber a contagem total de colunas.

P Itens Grid podem se sobrepor?

R Sim. Grid permite que itens ocupem a mesma área do grid — itens posteriores cobrem anteriores. Use isso para efeitos de sobreposição como texto em imagens. Controle empilhamento com z-index.

P Como usar a palavra-chave span?

R grid-column: span 2 significa "abranger 2 colunas" — mais intuitivo que escrever números de linha de grid. Não é preciso saber de qual linha começar; o navegador calcula automaticamente. Especialmente útil em cenários responsivos onde você não sabe a contagem exata de colunas.

📖 Resumo

Posicionamento de itens Grid é muito flexível — especifique com precisão linhas de grid início/fim, ou use palavra-chave span para abranger múltiplas linhas/colunas
Dentro das células, justify-items/align-items controlam alinhamento geral, justify-self/align-self controlam elementos individuais
Se números de linha são difíceis de lembrar, tente grid-template-areas para regiões nomeadas — mais intuitivo

📝 Exercícios

Crie um grid 4×4, posicione um item abrangendo 2 colunas e 2 linhas começando da coluna 2, linha 2.
Use grid-template-areas para um layout completo de página: cabeçalho (abrangendo 2 colunas), barra lateral, área de conteúdo, rodapé (abrangendo 2 colunas).
Centralize todos os itens horizontalmente e verticalmente em um contêiner grid (usando place-items: center).
Faça o terceiro item do grid alinhar ao canto inferior direito de sua célula (usando justify-self e align-self).

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós