Contêiner Grid (Grid Container): A 'tabela' que organiza os filhos

Assim como no Flexbox, onde você precisa definir um Contêiner Flex para que seus filhos se tornem Itens Flex, no CSS Grid você precisa definir um Contêiner Grid para que seus filhos se tornem Itens Grid. O Contêiner Grid é o elemento pai que vai abrigar e organizar todos os seus Itens Grid.

Pense no Contêiner Grid como a "tabela" invisível que você desenha na sua página. É dentro dessa "tabela" que você vai definir as linhas e colunas, e onde seus elementos filhos serão posicionados.

Como definir um Contêiner Grid

Para transformar um elemento HTML em um Contêiner Grid, você usa a propriedade display com um dos seguintes valores:

1. display: grid;

   • Cria um contêiner grid de nível de bloco. Isso significa que o contêiner ocupará toda a largura disponível e quebrará a linha antes e depois dele, como um div padrão. É o mais comum para layouts de página inteira ou seções maiores.

2. display: inline-grid;

   • Cria um contêiner grid de nível inline. Isso significa que o contêiner se comportará como um elemento inline (como um span), ocupando apenas o espaço necessário para seu conteúdo e permitindo que outros elementos inline fiquem ao seu lado. Menos comum, mas útil para componentes específicos.

Propriedades do Contêiner Grid

Uma vez que um elemento é definido como Contêiner Grid, você pode aplicar uma série de propriedades a ele para definir a estrutura da sua grade e como os itens se comportam dentro dela. As principais propriedades que você aplicará ao Contêiner Grid são:

• grid-template-columns: Define o número e o tamanho das colunas.
• grid-template-rows: Define o número e o tamanho das linhas.
• grid-template-areas: Define áreas nomeadas no grid para posicionamento mais fácil.
• grid-gap (ou gap): Define o espaçamento entre as linhas e colunas.
• justify-items: Alinha os itens ao longo do eixo da linha (horizontal) dentro de suas células.
• align-items: Alinha os itens ao longo do eixo da coluna (vertical) dentro de suas células.
• justify-content: Alinha o grid inteiro ao longo do eixo da linha (horizontal) dentro do contêiner.
• align-content: Alinha o grid inteiro ao longo do eixo da coluna (vertical) dentro do contêiner.

Vamos explorar cada uma dessas propriedades em detalhes nas próximas lições. Por enquanto, o mais importante é entender que o Contêiner Grid é o ponto de partida.

Exemplo Básico:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Contêiner Grid Básico</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f4f4f4;
    }

    .grid-container {
      /* 1. Definindo o elemento como Contêiner Grid */
      display: grid; 

      /* 2. Definindo 3 colunas de tamanho igual */
      grid-template-columns: 1fr 1fr 1fr; 

      /* 3. Definindo 2 linhas de tamanho fixo */
      grid-template-rows: 100px 150px; 

      /* 4. Adicionando um espaçamento entre as células */
      gap: 10px; /* Shorthand para grid-row-gap e grid-column-gap */

      background-color: #e0e0e0;
      border: 2px solid #333;
      padding: 10px;
      width: 80%; /* Para visualizarmos melhor o grid */
      margin: 0 auto; /* Centraliza o contêiner */
    }

    .grid-item {
      background-color: lightblue;
      border: 1px solid blue;
      padding: 15px;
      color: #333;
      font-weight: bold;
      text-align: center;
      display: flex; /* Usando Flexbox dentro do item para centralizar conteúdo */
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <h1>Contêiner Grid (Grid Container)</h1>

  <div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
  </div>

  <p>Acima, temos um <code>div</code> que foi transformado em um Contêiner Grid usando <code>display: grid;</code>. Ele tem 3 colunas e 2 linhas, e seus filhos (os <code>.grid-item</code>) são automaticamente posicionados dentro dessas células.</p>
  <p>Observe como os itens se organizam na grade que definimos no contêiner pai.</p>
</body>
</html>

Resultado:

• Você verá um contêiner cinza com uma borda preta.
• Dentro dele, 6 itens azuis estarão organizados em 3 colunas e 2 linhas, com um espaçamento de 10px entre eles.
• Os itens 1, 2 e 3 ocuparão a primeira linha.
• Os itens 4, 5 e 6 ocuparão a segunda linha.

Boas Práticas:

• Sempre comece pelo Contêiner: O primeiro passo para usar CSS Grid é sempre definir o elemento pai como display: grid; ou display: inline-grid;.
• Grid para Layouts Maiores: display: grid; é a escolha mais comum para layouts de página inteira ou grandes seções, pois ele se comporta como um bloco.
• Flexbox dentro do Grid: É muito comum usar Flexbox dentro de um Item Grid para alinhar o conteúdo interno desse item, como fizemos no exemplo (display: flex; justify-content: center; align-items: center; no .grid-item). Eles são aliados!
• Visualização no Navegador: Use as ferramentas de desenvolvedor do seu navegador (especialmente a aba "Layout" ou "Grid" no Chrome/Firefox) para visualizar a grade que você criou. Isso é extremamente útil para depurar e entender como seu grid está se comportando.

Entender o Contêiner Grid é o alicerce para construir qualquer layout com CSS Grid. Nas próximas lições, você aprenderá a moldar essa "tabela" com precisão.