1. O que é o CSS Grid Layout?

O CSS Grid é um módulo de especificação da W3C projetado com uma filosofia Layout-First (Estrutura Primeiro). Em vez de deixar o tamanho dos elementos ser definido exclusivamente pelo conteúdo individual de cada filho (como faz o Flexbox), o Grid permite que você desenhe previamente uma grade invisível de linhas e colunas na caixa pai e, em seguida, posicione os itens filhos dentro dessa matriz geométrica com precisão cirúrgica.

2. CSS Grid vs. Flexbox: A Grande Parceria da Web Moderna

Existe um mito persistente entre iniciantes de que “o CSS Grid veio para substituir o Flexbox”. Isso é um erro conceitual grave! Eles não são rivais; são complementares e foram desenhados para trabalhar em perfeita harmonia:

3. A Anatomia e Terminologia Sagrada do CSS Grid

Para dominar o Grid, você precisa se familiarizar com seus 6 conceitos fundamentais:

1. Grid Container (O Pai da Grade)

O elemento no qual declaramos display: grid (ou display: inline-grid). Ele estabelece um novo Contexto de Formatação de Grade para seus filhos diretos.

2. Grid Items (Os Filhos)

Todos os filhos diretos de primeiro nível do Grid Container tornam-se automaticamente itens da grade e são encaixados nas células disponíveis.

3. Grid Lines (Linhas de Grade)

São os divisores invisíveis que cortam a grade horizontal e verticalmente. É através do número dessas linhas que podemos ordenar onde um elemento começa e onde ele termina:

• As linhas verticais separam colunas.
• As linhas horizontais separam linhas.
• São numeradas a partir de 1 (da esquerda para a direita e de cima para baixo) e também de trás para frente usando números negativos (-1 representa a última linha da borda externa!).

4. Grid Tracks (Faixas de Grade)

É o espaço físico delimitado entre duas linhas de grade vizinhas. Em termos práticos: uma coluna inteira é um Grid Track vertical, e uma linha inteira é um Grid Track horizontal.

5. Grid Cell (Célula de Grade)

É a menor unidade indivisível do Grid. É a interseção exata de um track de linha com um track de coluna — o equivalente a uma célula de planilha do Excel.

6. Grid Area (Área de Grade)

Qualquer espaço retangular contínuo composto por uma ou mais células adjacentes (por exemplo, uma área que ocupa 2 colunas e 3 linhas).

4. Seu Primeiro Código: Declarando um Grid

Para criar uma grade com 3 colunas e 2 linhas, usamos a propriedade display: grid combinada com a definição de pistas estruturais:

.painel-grid {
  display: grid;
  /* Cria 3 colunas de 200px cada */
  grid-template-columns: 200px 200px 200px;
  /* Cria 2 linhas de 120px cada */
  grid-template-rows: 120px 120px;
  /* Espaçamento de 16px entre células */
  gap: 16px;
}

O navegador executa automaticamente o Algoritmo de Auto-Posicionamento (Auto-placement Algorithm): ele pega cada elemento filho presente no HTML e o coloca, em ordem natural, dentro de uma célula vazia da esquerda para a direita, quebrando linha automaticamente quando a terceira coluna é preenchida!

5. Dica Pro: Usando as DevTools para Enxergar o Grid

Como as Grid Lines são invisíveis a olho nu, os navegadores modernos (Google Chrome, Firefox, Microsoft Edge e Safari) possuem uma ferramenta fantástica em suas Ferramentas de Desenvolvedor (F12):

1. Abra a aba Elements (Elementos) ou Inspetor.
2. Ao lado do elemento pai com display: grid, você verá uma pequena pílula roxa escrita grid.
3. Clique nessa pílula: o navegador projetará na tela um mapa pontilhado mostrando exatamente os números de cada linha, as larguras das faixas e as canaletas de gap!

6. Laboratório Prático: Anatomia de um Grid 2D na Prática

No código interativo abaixo, construímos um contêiner com 3 colunas e 2 linhas, destacando visualmente as células numeradas e o comportamento automático do fluxo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de Introdução ao CSS Grid</title>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0b0f19;
      color: #f8fafc;
      padding: 30px;
    }
 
    /* O Grid Container */
    .grid-container {
      display: grid;
      /* 3 Colunas de 180px */
      grid-template-columns: 180px 180px 180px;
      /* 2 Linhas de 110px */
      grid-template-rows: 110px 110px;
      gap: 16px;
      background: #1e293b;
      padding: 20px;
      border-radius: 14px;
      border: 2px dashed #475569;
      max-width: 620px;
    }
 
    /* Os Grid Items */
    .grid-item {
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
 
    .grid-item span {
      font-size: 0.75rem;
      color: #93c5fd;
      font-weight: 400;
      margin-top: 4px;
    }
  </style>
</head>
<body>
  <h2 style="color:#38bdf8; margin-top:0;">Sua Primeira Matriz CSS Grid 2D</h2>
  <p style="color:#94a3b8; font-size:0.9rem;">
    Uma grade composta por 3 colunas e 2 linhas preenchida pelo algoritmo de auto-posicionamento:
  </p>
 
  <div class="grid-container">
    <div class="grid-item">Célula 1<span>Linha 1, Coluna 1</span></div>
    <div class="grid-item">Célula 2<span>Linha 1, Coluna 2</span></div>
    <div class="grid-item">Célula 3<span>Linha 1, Coluna 3</span></div>
    <div class="grid-item">Célula 4<span>Linha 2, Coluna 1</span></div>
    <div class="grid-item">Célula 5<span>Linha 2, Coluna 2</span></div>
    <div class="grid-item">Célula 6<span>Linha 2, Coluna 3</span></div>
  </div>
</body>
</html>

Abra este laboratório no Playground IDE e experimente adicionar um 7º item para ver como o CSS Grid cria automaticamente uma terceira linha implícita para acomodar o excesso:

⚡ Abrir no Playground IDE →

7. Resumo e Próximos Passos

• O CSS Grid Layout é o primeiro sistema bidimensional (2D) nativo do CSS, controlando linhas e colunas simultaneamente.
• Flexbox e Grid não são concorrentes: Grid organiza a macroestrutura da página (2D) e Flexbox organiza os microcomponentes (1D).
• Grid Lines são as divisórias numeradas (de 1 a N e de -1 a -N).
• Grid Tracks são as faixas inteiras (colunas ou linhas).
• Grid Cells são as menores unidades quadrangulares (interseção de um track de linha com um de coluna).
• grid-template-columns e grid-template-rows definem as dimensões de cada faixa na grade.

O post Introdução ao CSS Grid Layout no CSS3 | Web Academy apareceu primeiro em Web-Zoneware.