Itens Grid CSS

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

Propriedades de Itens Grid

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

grid-column e grid-row

Controlam onde itens começam e terminam no grid:

Exemplo

HTML

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.span-2-col { grid-column: span 2; }
.span-2-row { grid-row: span 2; }
</style>
<div class="grid">
  <div class="item">1</div>
  <div class="item span-2-col">Abrange 2 colunas</div>
  <div class="item">3</div>
  <div class="item span-2-row">Abrange 2 linhas</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

▶ Experimente

Item de Largura Total

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

Exemplo

HTML

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.header {
  grid-column: 1 / -1; /* Abrange todas as colunas */
  background: #2c3e50;
  color: white;
  padding: 15px;
  text-align: center;
}
.item {
  background: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 4px;
}
</style>
<div class="grid">
  <div class="header">Cabeçalho (largura total)</div>
  <div class="item">Coluna 1</div>
  <div class="item">Coluna 2</div>
  <div class="item">Coluna 3</div>
</div>

▶ Experimente

justify-self / align-self

Controlam alinhamento dentro de células individuais:

Exemplo

HTML

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
  height: 200px;
}
.item {
  background: #e74c3c;
  color: white;
  padding: 10px;
  border-radius: 4px;
}
.start { justify-self: start; align-self: start; }
.center { justify-self: center; align-self: center; }
.end { justify-self: end; align-self: end; }
</style>
<div class="grid">
  <div class="item start">Início</div>
  <div class="item center">Centro</div>
  <div class="item end">Fim</div>
</div>

▶ Experimente

Sobreposição de Grid

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

Exemplo

HTML

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  background: rgba(231, 76, 60, 0.7);
  color: white;
  padding: 20px;
  z-index: 1;
}
.item2 {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  background: rgba(52, 152, 219, 0.7);
  color: white;
  padding: 20px;
}
</style>
<div class="grid">
  <div class="item1">Item 1 (atrás)</div>
  <div class="item2">Item 2 (no topo)</div>
</div>

▶ Experimente

❓ Perguntas Frequentes

Q 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.

Q 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.

Q 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).