Alinhamento do Contêiner Grid

8.1 Propriedade justify-content

CSS Grid Layout oferece ferramentas poderosas para gerenciar o alinhamento de todo o contêiner da grade dentro do espaço disponível. As propriedades justify-content, align-content e place-content permitem controlar o alinhamento das linhas e colunas dentro do contêiner, proporcionando flexibilidade e precisão na criação de layouts.

A propriedade justify-content gerencia o alinhamento horizontal de toda a grade dentro do contêiner. Essa propriedade é útil quando o tamanho do contêiner é maior do que a largura necessária da própria grade.

Sintaxe:

    
      .grid-container {
        display: grid;
        justify-content: value;
      }
    
  

Onde: value pode assumir os seguintes valores:

• start: alinhar a grade ao início do contêiner
• end: alinhar a grade ao final do contêiner
• center: alinhar a grade ao centro do contêiner
• stretch: esticar a grade para preencher todo o contêiner
• space-around: colocar espaço igual em torno de cada elemento
• space-between: colocar espaço igual entre os elementos
• space-evenly: colocar espaço igual entre os elementos e as bordas do contêiner

Exemplo 1: Alinhamento ao início do contêiner

Neste exemplo, todo o conteúdo será alinhado à borda esquerda do contêiner:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        justify-content: start; /* Alinha o conteúdo à borda esquerda do contêiner */
      }
    
  

Exemplo 2: Centralização do conteúdo

Neste exemplo, todo o conteúdo será centralizado dentro do contêiner:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        justify-content: center; /* Centraliza o conteúdo dentro do contêiner */
      }
    
  

8.2 Propriedade align-content

A propriedade align-content define como o conteúdo da grade é alinhado no eixo vertical dentro do contêiner da grade. Ela é útil quando a grade não preenche todo o espaço vertical disponível.

Sintaxe:

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

Onde: value — valor que define o alinhamento vertical do conteúdo. Valores possíveis:

• start: alinha o conteúdo ao início do contêiner
• end: alinha o conteúdo ao final do contêiner
• center: centraliza o conteúdo dentro do contêiner
• space-between: coloca conteúdo com distância igual entre os elementos
• space-around: coloca conteúdo com distância igual em torno de cada elemento
• space-evenly: coloca conteúdo com distância igual entre os elementos e as bordas do contêiner
• stretch (padrão): estica o conteúdo para preencher todo o espaço disponível

Exemplo 1: Alinhamento ao início do contêiner

Neste exemplo, todo o conteúdo será alinhado à borda superior do contêiner:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        align-content: start; /* Alinha o conteúdo à borda superior do contêiner */
      }
    
  

Exemplo 2: Centralização do conteúdo

Neste exemplo, todo o conteúdo será centralizado dentro do contêiner:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        align-content: center; /* Centraliza o conteúdo dentro do contêiner */
      }
    
  

8.3 Propriedade place-content

A propriedade place-content é uma abreviação para definir valores de justify-content e align-content ao mesmo tempo.

Sintaxe:

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

Onde:

• justify-value: valor para o alinhamento horizontal (justify-content)
• align-value: valor para o alinhamento vertical (align-content)

Exemplo 1: Centralização do conteúdo horizontalmente e verticalmente

Neste exemplo, todo o conteúdo será centralizado dentro do contêiner tanto horizontalmente quanto verticalmente:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        place-content: center center; /* Centraliza o conteúdo tanto horizontalmente quanto verticalmente */
      }
    
  

Exemplo 2: Esticar o conteúdo na largura e alinhar ao topo

Neste exemplo, o conteúdo será esticado na largura do contêiner e alinhado ao topo:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        place-content: stretch start; /* Estica o conteúdo na largura e alinha ao topo */
      }
    
  

8.4 Exemplo de implementação completa

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px); /* Três colunas de largura fixa */
        grid-template-rows: repeat(3, 100px); /* Três linhas de altura fixa */
        gap: 10px;
        place-content: center center; /* Centralizar o conteúdo horizontalmente e 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 do Contêiner 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 contêiner Grid com três colunas de largura fixa e três linhas de altura fixa. Usa a propriedade place-content para centralizar o conteúdo horizontalmente e verticalmente.
• .grid-item: define estilos básicos para os elementos da grade, como cor de fundo, cor do texto, espaçamento, centralização do texto e borda.