Alinhamento de Elementos no Grid

7.1 Propriedade justify-items

O CSS Grid Layout oferece ferramentas eficientes para gerenciar o alinhamento dos elementos dentro da grade. As propriedades justify-items, align-items e place-items permitem ajustar exatamente como os elementos da grade são posicionados dentro de suas células horizontalmente e verticalmente. Vamos dar uma olhada mais de perto nessas propriedades.

A propriedade justify-items define o alinhamento horizontal de todos os elementos da grade dentro de suas células em toda a grade.

Sintaxe:

    
      .grid-container {
        justify-items: value;
      }
    
  

Onde:

• value: valor que define o alinhamento horizontal dos elementos. Valores possíveis:
  • start: alinha os elementos no início da célula
  • end: alinha os elementos no final da célula
  • center: centraliza os elementos dentro da célula
  • stretch (padrão): estica os elementos para ocupar toda a largura da célula

Exemplo 1: Alinhamento no início da célula

Neste exemplo, todos os elementos serão alinhados à borda esquerda de suas células:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: start; /* Todos os elementos são alinhados no início da célula */
      }
    
  

Exemplo 2: Centralização de elementos

Neste exemplo, todos os elementos serão centralizados dentro de suas células:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center; /* Todos os elementos são centralizados dentro da célula */
      }
    
  

7.2 Propriedade align-items

A propriedade align-items define o alinhamento vertical de todos os elementos da grade dentro de suas células em toda a grade.

Sintaxe:

    
      .grid-container {
        align-items: value;
      }
    
  

Onde:

• value: valor que define o alinhamento vertical dos elementos. Valores possíveis:
  • start: alinha os elementos no início da célula
  • end: alinha os elementos no final da célula
  • center: centraliza os elementos dentro da célula verticalmente
  • stretch (padrão): estica os elementos para ocupar toda a altura da célula

Exemplo 1: Alinhamento no início da célula

Neste exemplo, todos os elementos serão alinhados à borda superior de suas células:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        align-items: start; /* Todos os elementos são alinhados no topo da célula */
      }
    
  

Exemplo 2: Centralização de elementos verticalmente

Neste exemplo, todos os elementos serão centralizados verticalmente dentro de suas células:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        align-items: center; /* Todos os elementos são centralizados verticalmente dentro da célula */
      }
    
  

7.3 Propriedade place-items

A propriedade place-items é uma forma abreviada de definir os valores de align-items e justify-items ao mesmo tempo.

Sintaxe:

    
      .grid-container {
        place-items: align-value justify-value;
      }
    
  

Onde:

• align-value: valor para alinhamento vertical dentro da célula (align-items)
• justify-value: valor para alinhamento horizontal dentro da célula (justify-items)

No caso de especificar um único valor para a propriedade place-items, como place-items: stretch, os elementos serão alinhados em ambas as direções.

Exemplo 1: Centralização de elementos verticalmente e horizontalmente

Neste exemplo, todos os elementos serão centralizados dentro de suas células tanto horizontalmente quanto verticalmente:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        place-items: center; /* Os elementos são centralizados tanto horizontalmente quanto verticalmente */
      }
    
  

Exemplo 2: Esticamento de elementos na altura e alinhamento no canto superior esquerdo

Neste exemplo, todos os elementos serão esticados na altura e alinhados no canto superior esquerdo de suas células:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        place-items: stretch start; /* Os elementos são esticados para ocupar toda a altura da célula e alinhados no canto superior esquerdo */
      }
    
  

7.4 Exemplo de implementação completa

Exemplo de implementação completa:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Três colunas de largura igual */
        grid-template-rows: repeat(3, 100px); /* Três linhas de altura fixa */
        gap: 10px;
        place-items: center center; /* Centralização dos elementos tanto horizontalmente quanto verticalmente */
      }

      .grid-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
        text-align: center;
        border: 1px solid #fff;
      }
    
  

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Exemplo de Alinhamento de Elementos no CSS Grid</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item item1">Elemento 1</div>
            <div class="grid-item item2">Elemento 2</div>
            <div class="grid-item item3">Elemento 3</div>
            <div class="grid-item item4">Elemento 4</div>
            <div class="grid-item item5">Elemento 5</div>
            <div class="grid-item item6">Elemento 6</div>
          </div>
        </body>
      </html>
    
  

Explicação do código:

• .grid-container: cria um container Grid com três colunas de largura igual e três linhas de altura fixa. Utiliza a propriedade place-items para centralizar os elementos tanto horizontalmente quanto verticalmente
• .grid-item: define estilos básicos para os elementos da grade, como cor de fundo, cor do texto, padding, centralização do texto e borda