English 中文 العربية 日本語 Português

CSS: Itens Grid CSS

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

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

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

(1) 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

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

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

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

📝 Exercícios

  1. Crie um grid 4×4, posicione um item abrangendo 2 colunas e 2 linhas começando da coluna 2, linha 2.
  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).
  3. Centralize todos os itens horizontalmente e verticalmente em um contêiner grid (usando place-items: center).
  4. Faça o terceiro item do grid alinhar ao canto inferior direito de sua célula (usando justify-self e align-self).
Web-Tutorial.com

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.

100%