Itens Grid (Grid Items): Os filhos que ocupam as células

Entenda como os elementos dentro de um contêiner grid se comportam.

Depois de definir um Contêiner Grid com display: grid;, todos os seus filhos diretos se tornam automaticamente Itens Grid. Esses Itens Grid são os elementos que serão posicionados e organizados dentro das células da grade que você criou.

Pense nos Itens Grid como os "móveis" que você vai colocar dentro dos "cômodos" (células) da sua "casa" (Contêiner Grid). Por padrão, eles se encaixam nas células disponíveis, mas você tem um controle incrível sobre onde e como eles se posicionam.

Comportamento Padrão dos Itens Grid

Quando você define um Contêiner Grid, os Itens Grid se comportam da seguinte forma por padrão:

  • Fluxo Automático: Eles são colocados automaticamente nas células disponíveis, seguindo a ordem do código HTML, preenchendo a primeira linha, depois a segunda, e assim por diante.
  • Uma Célula por Padrão: Cada Item Grid ocupa uma única célula da grade por padrão.
  • Esticamento: Por padrão, os itens se esticam para preencher toda a largura e altura de sua célula (justify-self: stretch; e align-self: stretch;).

Propriedades dos Itens Grid

Embora o Contêiner Grid defina a estrutura geral, você pode aplicar propriedades diretamente aos Itens Grid para controlar seu posicionamento e alinhamento individualmente. As principais propriedades que você aplicará aos Itens Grid são:

  • grid-column-start: Define a linha de grade onde o item começa na direção da coluna.
  • grid-column-end: Define a linha de grade onde o item termina na direção da coluna.
  • grid-row-start: Define a linha de grade onde o item começa na direção da linha.
  • grid-row-end: Define a linha de grade onde o item termina na direção da linha.
  • grid-column: Shorthand para grid-column-start e grid-column-end.
  • grid-row: Shorthand para grid-row-start e grid-row-end.
  • grid-area: Permite nomear uma área do grid e posicionar o item nela, ou definir start/end para linhas e colunas.
  • justify-self: Alinha o item dentro de sua célula ao longo do eixo da linha (horizontal).
  • align-self: Alinha o item dentro de sua célula ao longo do eixo da coluna (vertical).

Vamos explorar cada uma dessas propriedades em detalhes nas próximas lições. Por enquanto, o importante é saber que os filhos diretos de um Contêiner Grid são os Itens Grid e que você pode controlá-los individualmente.

Exemplo Básico:

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

    .grid-container {
      display: grid;
      grid-template-columns: 100px 1fr 1fr; /* Coluna 1 fixa, Colunas 2 e 3 flexíveis */
      grid-template-rows: 80px 120px; /* Linhas com alturas fixas */
      gap: 10px;
      background-color: #e0e0e0;
      border: 2px solid #333;
      padding: 10px;
      width: 80%;
      margin: 0 auto;
    }

    .grid-item {
      background-color: lightblue;
      border: 1px solid blue;
      padding: 15px;
      color: #333;
      font-weight: bold;
      text-align: center;
      /* Por padrão, os itens se esticam para preencher a célula */
      /* Podemos centralizar o conteúdo dentro do item usando Flexbox */
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* Exemplo de um item com comportamento diferente */
    .item-especial {
      background-color: lightcoral;
      /* Este item vai ocupar da linha de grade 1 até a linha de grade 3 na coluna */
      /* E da linha de grade 1 até a linha de grade 2 na linha */
      /* Veremos isso em detalhes nas próximas lições */
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 1;
      grid-row-end: 2;
    }
  </style>
</head>
<body>
  <h1>Itens Grid (Grid Items)</h1>

  <div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item item-especial">Item Especial</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, os <code>div</code>s dentro do <code>.grid-container</code> são os Itens Grid. Observe como o "Item Especial" ocupa mais de uma célula, demonstrando o poder de posicionamento individual dos itens.</p>
  <p>Os outros itens se encaixam automaticamente nas células restantes.</p>
</body>
</html>

Resultado:

  • Você verá um contêiner com 3 colunas e 2 linhas.
  • O "Item Especial" (vermelho) ocupará as duas primeiras colunas da primeira linha.
  • Os outros itens (azuis) se encaixarão automaticamente nas células restantes, seguindo a ordem do HTML.

Boas Práticas:

  • Filhos Diretos: Apenas os filhos diretos de um Contêiner Grid se tornam Itens Grid. Elementos aninhados mais profundamente não são Itens Grid, a menos que eles próprios sejam Contêineres Grid.
  • Fluxo Automático: Entenda que, por padrão, os itens preenchem a grade automaticamente. Você só precisa intervir com propriedades de Item Grid quando quiser um posicionamento específico ou um comportamento de alinhamento diferente do padrão.
  • Flexbox dentro do Item Grid: Continue usando Flexbox dentro de um Item Grid para alinhar o conteúdo interno desse item. Isso é uma combinação poderosa!
  • Ferramentas de Desenvolvedor: Use as ferramentas de desenvolvedor do seu navegador para inspecionar os Itens Grid e ver como eles estão posicionados na grade.

Entender os Itens Grid e suas propriedades é o que permite que você preencha e personalize a grade que você desenhou com o Contêiner Grid. Nas próximas lições, você aprenderá a posicioná-los com precisão.