EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Contêiner Grid CSS

CSS Grid é um poderoso sistema de layout bidimensional que permite controlar linhas e colunas simultaneamente.

Propriedades do Contêiner Grid

Referência Rápida

Propriedade Valores Finalidade
display: grid — Cria contêiner grid
grid-template-columns 100px 1fr 2fr, repeat(3, 1fr) Definições de colunas
grid-template-rows 100px auto, repeat(3, 100px) Definições de linhas
gap 10px, 10px 20px Espaço entre itens
grid-template-areas "header header" "main aside" Áreas nomeadas do grid

Unidade fr

A unidade fr distribui espaço restante proporcionalmente:

Exemplo

HTML 
<style>
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Proporção 1:2:1 */
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
}
</style>
<div class="container">
  <div class="item">1fr</div>
  <div class="item">2fr (duas vezes mais largo)</div>
  <div class="item">1fr</div>
</div>
▶ Experimente

repeat()

A função repeat() reduz repetição:

Exemplo

HTML 
<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Mesmo que: 1fr 1fr 1fr */
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #e74c3c;
  color: white;
  padding: 20px;
  text-align: center;
}
</style>
<div class="container">
  <div class="item">Coluna 1</div>
  <div class="item">Coluna 2</div>
  <div class="item">Coluna 3</div>
</div>
▶ Experimente

minmax() + auto-fill/auto-fit

Cria grids responsivos que ajustam automaticamente a contagem de colunas:

Exemplo

HTML 
<style>
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  background: #f5f5f5;
  padding: 15px;
}
.item {
  background: #2ecc71;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 4px;
}
</style>
<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
▶ Experimente

auto-fill vs auto-fit:

grid-template-areas

Define layout com áreas nomeadas:

Exemplo

HTML 
<style>
.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 60px 1fr 40px;
  gap: 10px;
  min-height: 100vh;
}
.header { grid-area: header; background: #2c3e50; color: white; }
.sidebar { grid-area: sidebar; background: #34495e; color: white; }
.main { grid-area: main; background: #ecf0f1; }
.aside { grid-area: aside; background: #34495e; color: white; }
.footer { grid-area: footer; background: #2c3e50; color: white; }
.layout > * { padding: 20px; display: flex; align-items: center; justify-content: center; }
</style>
<div class="layout">
  <header class="header">Cabeçalho</header>
  <aside class="sidebar">Barra Lateral</aside>
  <main class="main">Conteúdo Principal</main>
  <aside class="aside">Lateral</aside>
  <footer class="footer">Rodapé</footer>
</div>
▶ Experimente

❓ Perguntas Frequentes

Q Como escolher entre Grid e Flexbox?
R Unidimensional (linha ou coluna única) usa Flexbox, bidimensional (controle simultâneo de linha e coluna) usa Grid. A maioria das páginas usa ambos: Grid para esqueleto geral da página, Flexbox para arranjos locais. Usar ambos em uma página é completamente normal.
Q Qual é a diferença entre unidades fr e porcentagens?
R `fr` distribui espaço restante, porcentagens distribuem largura total. Com gap, `fr` deduz automaticamente o gap antes de calcular proporções, porcentagens não. `1fr 1fr 1fr` com gap ainda é perfeitamente terços, enquanto `33.33% 33.33% 33.33%` transborda.
Q Como usar grid-template-areas?
R Defina layout com áreas nomeadas: `grid-template-areas: "header header" "sidebar main" "footer footer";` depois atribua filhos com `grid-area: header`. Para mudar layout, apenas ajuste o template de string — não é preciso reposicionar filhos.

📖 Resumo

📝 Exercícios

Básico

  1. Crie um contêiner grid 3×3, cada célula 100px×100px, gap 10px.
  2. Use unidade 1fr para um layout "duas colunas" (esquerda 1fr, direita 3fr).

Intermediário

  1. Crie um grid de cards auto-adaptativo com repeat(auto-fill, minmax(150px, 1fr)) — redimensione o navegador para ver colunas mudarem.
  2. Crie um layout "clássico de três linhas duas colunas": cabeçalho (abrangendo duas colunas), menu esquerdo, conteúdo direito, rodapé (abrangendo duas colunas).

Desafio

  1. Crie uma galeria de imagens responsiva: desktop 4 colunas, tablet 2 colunas, mobile 1 coluna, usando auto-fill + minmax.
  2. Use grid-template-areas para um layout completo de blog (cabeçalho, navegação, conteúdo principal, barra lateral, rodapé).
100%