5.9 Grid

CSS Grid é um sistema de layout bidimensional (linhas e colunas) que permite criar designs complexos de forma fácil e organizada. É uma das formas mais poderosas de criar layouts em CSS moderna.

⚡ Ativação

Para usar Grid, transforme um elemento em um container grid:

cssCopyDownload

.container {
  display: grid; /* ✨ Isso ativa o Grid Layout! */
}

---

🛠️ Propriedades Principais com Exemplos

1️⃣ grid-template-columns & grid-template-rows

Define o tamanho e quantidade de colunas/linhas.

📌 Exemplo 1: Grid 3x2

cssCopyDownload

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px; /* 3 colunas 📏 */
  grid-template-rows: 50px 100px; /* 2 linhas 📐 */
}

Saída:

textCopyDownload

| 100px | 200px | 100px |
| 50px  |       |       |
| 100px |       |       |

📌 Exemplo 2: Unidade fr (fração) – Divisão flexível

cssCopyDownload

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 🎯 Coluna do meio é 2x maior! */
}

---

2️⃣ gap (espaçamento entre células)

Controla o espaço entre linhas e colunas.

📌 Exemplo:

cssCopyDownload

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px; /* 📦 Espaço entre tudo */
  row-gap: 10px; /* ↔️ Espaço entre linhas */
  column-gap: 30px; /* ↕️ Espaço entre colunas */
}

---

3️⃣ grid-column & grid-row

Controla onde os itens começam e terminam no grid.

📌 Exemplo: Item que ocupa 2 colunas

cssCopyDownload

.item {
  grid-column: 1 / 3; /* 🚀 Começa na linha 1 e termina na 3 */
  /* Equivalente a: */
  grid-column-start: 1;
  grid-column-end: 3;
}

---

🏆 Exemplo Prático Completo (Layout Básico)

htmlCopyDownloadRun

<div class="grid-container">
  <div class="header">📌 Cabeçalho</div>
  <div class="sidebar">📋 Menu</div>
  <div class="content">📦 Conteúdo</div>
  <div class="footer">©️ Rodapé</div>
</div>

cssCopyDownload

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 🎨 Coluna fixa + flexível */
  grid-template-rows: 80px 1fr 60px; /* 📏 Alturas definidas */
  gap: 15px; /* 📌 Espaçamento */
  height: 100vh; /* 🖥️ Ocupa toda a tela */
}

.header {
  grid-column: 1 / 3; /* 🔥 Ocupa todas as colunas! */
  background: #3498db;
  color: white;
}

.sidebar {
  grid-row: 2 / 3;
  background: #2ecc71;
}

.content {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  background: #f1c40f;
}

.footer {
  grid-column: 1 / 3;
  background: #e74c3c;
  color: white;
}

---

🚀 Recursos Avançados

🔄 Função repeat() (Evita repetição)

cssCopyDownload

.container {
  grid-template-columns: repeat(3, 1fr); /* 🔁 3 colunas de tamanho igual */
}

🗺️ Áreas de Grid (Layout visual intuitivo)

cssCopyDownload

.container {
  grid-template-areas:
    "header header" /* 📌 Cabeçalho ocupa 2 colunas */
    "sidebar content" /* 📋 Menu + Conteúdo */
    "footer footer"; /* ©️ Rodapé ocupa 2 colunas */
}

.header { grid-area: header; }  
.sidebar { grid-area: sidebar; }  
.content { grid-area: content; }  
.footer { grid-area: footer; }