Aula 13 - Grid Layout 🏁

O Poder das Grades no CSS

---

👋 Olá!

Se o Flexbox era sobre linhas, o Grid é sobre o tabuleiro inteiro!

Hoje vamos aprender a dividir a tela em áreas profissionais. 🏗️

---

Agenda de Hoje 📅

1. Flexbox vs Grid
2. Criando o Grid Container
3. Colunas e Linhas
4. A Unidade FR (Fração)
5. A Função Repeat
6. Espaçamento (Gap)

---

📐 1. Flexbox vs Grid

• Flexbox: Unidimensional (Linha OU Coluna).
• Grid: Bidimensional (Linha E Coluna ao mesmo tempo).

---

Quando usar qual? 🤔

• Flexbox: Conteúdo flexível (menus, cards).
• Grid: Estrutura da página (cabeçalho, lateral, centro).

---

📦 2. Grid Container

.container {
  display: grid;
}

- Define que o pai agora é uma grade.

---

🧱 3. Colunas e Linhas

---

Definindo Colunas 🏛️

.grid {
  grid-template-columns: 200px 400px;
}

- Cria duas colunas com larguras fixas.

---

Definindo Linhas 📏

.grid {
  grid-template-rows: 100px auto;
}

- A primeira linha tem 100px e a segunda se adapta ao conteúdo.

---

📊 Estrutura da Grade

graph TD
    PARENT[Grid Container] --> C1[Coluna 1]
    PARENT --> C2[Coluna 2]
    Note over C1,C2: grid-template-columns

---

🍰 4. A Unidade FR

• FR = Fraction (Fração).
• Divide o espaço livre proporcionalmente.

.grid {
  grid-template-columns: 1fr 2fr;
}

- A segunda coluna será o DOBRO da primeira.

---

🔄 5. Função Repeat

• Para não ficar repetindo valores.

/* Antigo */
grid-template-columns: 1fr 1fr 1fr;

/* Moderno */
grid-template-columns: repeat(3, 1fr);

---

🕳️ 6. Gap (O Respiro)

• Espaço entre as células.
• Sem precisar de margin nos itens!

.grid {
  gap: 20px;
}

---

🎯 7. Posicionando Itens

Diga onde o item deve morar.

.topo {
  grid-column: 1 / 4; /* Ocupa 3 colunas */
}

---

🕵️‍♂️ Resumo da Aula ✅

• display: grid inicia a grade.
• grid-template-columns cria as colunas.
• fr é a unidade de flexibilidade.
• gap cria o espaçamento interno da grade.

---

Próxima Aula 📱

Responsividade

Vamos fazer nosso site se adaptar magicamente a qualquer tela!

---

Dúvidas? 🤔

"Grid Layout é como desenhar em papel quadriculado: você decide exatamente onde cada peça do quebra-cabeça deve estar."