Propriedades justify-content, align-content, place-content: Alinhando o grid inteiro

Aprenda a alinhar todo o grid dentro do contêiner.

Você já aprendeu a alinhar os Itens Grid dentro de suas células com justify-items e align-items. Agora, vamos dar um passo para trás e ver como alinhar o grid inteiro (todas as suas linhas e colunas) dentro do Contêiner Grid.

Isso é útil quando o tamanho total do seu grid (a soma das larguras das colunas e alturas das linhas, mais os gaps) é menor do que o espaço disponível no Contêiner Grid. Nesses casos, você terá espaço extra no contêiner, e as propriedades justify-content, align-content e place-content permitem que você controle como esse espaço extra é distribuído.

Pense nisso como posicionar um quadro menor em uma parede maior. Você pode querer centralizar o quadro, empurrá-lo para um canto, ou distribuir o espaço restante ao redor dele.

Entendendo os Eixos de Alinhamento do Grid

Assim como no Flexbox, o alinhamento do conteúdo do grid ocorre em dois eixos:

  • Eixo da Linha (Inline/Horizontal): Controlado por justify-content. Alinha o grid inteiro horizontalmente dentro do contêiner.
  • Eixo da Coluna (Block/Vertical): Controlado por align-content. Alinha o grid inteiro verticalmente dentro do contêiner.

Propriedades de Alinhamento do Conteúdo do Grid

Essas propriedades são aplicadas ao Contêiner Grid.

1. justify-content (Eixo da Linha/Horizontal)

Define como o grid inteiro é alinhado ao longo do eixo da linha (horizontal) dentro do Contêiner Grid, quando há espaço extra.

Valores:

  • start: O grid é alinhado ao início do contêiner (esquerda em ltr).
  • end: O grid é alinhado ao fim do contêiner (direita em ltr).
  • center: O grid é centralizado horizontalmente no contêiner.
  • stretch (padrão): As trilhas do grid são esticadas para preencher o espaço disponível (se max-content ou auto for usado para o tamanho da trilha).
  • space-around: Distribui o espaço extra igualmente ao redor de cada trilha do grid.
  • space-between: Distribui o espaço extra igualmente entre as trilhas do grid (sem espaço nas bordas externas).
  • space-evenly: Distribui o espaço extra igualmente entre as trilhas e também nas bordas externas.

2. align-content (Eixo da Coluna/Vertical)

Define como o grid inteiro é alinhado ao longo do eixo da coluna (vertical) dentro do Contêiner Grid, quando há espaço extra.

Valores:

  • start: O grid é alinhado ao início do contêiner (topo).
  • end: O grid é alinhado ao fim do contêiner (base).
  • center: O grid é centralizado verticalmente no contêiner.
  • stretch (padrão): As trilhas do grid são esticadas para preencher o espaço disponível (se max-content ou auto for usado para o tamanho da trilha).
  • space-around: Distribui o espaço extra igualmente ao redor de cada trilha do grid.
  • space-between: Distribui o espaço extra igualmente entre as trilhas do grid (sem espaço nas bordas externas).
  • space-evenly: Distribui o espaço extra igualmente entre as trilhas e também nas bordas externas.

3. place-content (Shorthand para align-content e justify-content)

Aplicado ao Contêiner Grid. É um shorthand para definir align-content e justify-content em uma única propriedade.

Sintaxe:

.grid-container {
  place-content: <align-content-valor> <justify-content-valor>;
}

Exemplos:

  • place-content: center;

    • Equivalente a: align-content: center; justify-content: center;
    • Centraliza o grid inteiro tanto vertical quanto horizontalmente no contêiner.

  • place-content: start space-between;

    • Equivalente a: align-content: start; justify-content: space-between;
    • Alinha o grid ao topo e distribui o espaço horizontalmente entre as colunas.

Exemplo Prático:

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

    .grid-container {
      display: grid;
      grid-template-columns: 100px 100px 100px; /* Colunas fixas, total 300px */
      grid-template-rows: 80px 80px; /* Linhas fixas, total 160px */
      gap: 10px;
      background-color: #e0e0e0;
      border: 2px solid #333;
      padding: 10px;
      width: 500px; /* Contêiner maior que o grid (500px > 300px + 2*10px gap) */
      height: 300px; /* Contêiner maior que o grid (300px > 160px + 1*10px gap) */
      margin: 0 auto 30px auto;
    }

    .grid-item {
      background-color: lightblue;
      border: 1px solid blue;
      padding: 15px;
      color: #333;
      font-weight: bold;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* --- Exemplos de alinhamento do grid inteiro --- */

    .container-start {
      justify-content: start;
      align-content: start;
      background-color: lightcoral;
    }

    .container-center {
      justify-content: center;
      align-content: center;
      background-color: lightgreen;
    }

    .container-end {
      justify-content: end;
      align-content: end;
      background-color: lightgoldenrodyellow;
    }

    .container-space-between {
      justify-content: space-between;
      align-content: space-between;
      background-color: lightsalmon;
    }

    .container-space-around {
      justify-content: space-around;
      align-content: space-around;
      background-color: lightgray;
    }

    .container-space-evenly {
      justify-content: space-evenly;
      align-content: space-evenly;
      background-color: lightcyan;
    }

    .container-place-content {
      place-content: center space-around; /* align-content: center; justify-content: space-around; */
      background-color: lightpink;
    }
  </style>
</head>
<body>
  <h1>Alinhando o Grid Inteiro</h1>

  <p>Observe que os exemplos abaixo só terão efeito se o tamanho total do grid (colunas + gaps e linhas + gaps) for menor que o tamanho do contêiner.</p>

  <h2>`justify-content: start; align-content: start;` (Canto Superior Esquerdo)</h2>
  <div class="grid-container container-start">
    <div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div>
    <div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div>
  </div>

  <h2>`justify-content: center; align-content: center;` (Centralizado)</h2>
  <div class="grid-container container-center">
    <div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div>
    <div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div>
  </div>

  <h2>`justify-content: end; align-content: end;` (Canto Inferior Direito)</h2>
  <div class="grid-container container-end">
    <div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div>
    <div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div>
  </div>

  <h2>`justify-content: space-between; align-content: space-between;`</h2>
  <div class="grid-container container-space-between">
    <div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div>
    <div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div>
  </div>

  <h2>`justify-content: space-around; align-content: space-around;`</h2>
  <div class="grid-container container-space-around">
    <div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div>
    <div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div>
  </div>

  <h2>`justify-content: space-evenly; align-content: space-evenly;`</h2>
  <div class="grid-container container-space-evenly">
    <div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div>
    <div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div>
  </div>

  <h2>`place-content: center space-around;` (Shorthand)</h2>
  <div class="grid-container container-place-content">
    <div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div>
    <div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div>
  </div>
</body>
</html>

Resultado:

  • Você verá vários contêineres grid, cada um demonstrando como o grid inteiro (todas as suas colunas e linhas) é alinhado dentro do espaço extra do contêiner.
  • Observe a diferença na distribuição do espaço extra entre space-between, space-around e space-evenly.

Boas Práticas:

  • Espaço Extra: Essas propriedades só terão efeito se o tamanho total do grid for menor que o tamanho do Contêiner Grid. Se o grid preencher todo o contêiner, não haverá espaço extra para distribuir.
  • Contêiner Grid: Lembre-se que justify-content, align-content e place-content são sempre aplicadas ao Contêiner Grid.
  • stretch como padrão: O valor padrão para justify-content e align-content é stretch. Isso significa que, se as trilhas do grid forem definidas com auto ou max-content, elas tentarão se esticar para preencher o espaço disponível. Se forem definidas com tamanhos fixos (px, em, rem) ou fr, stretch não terá efeito e o padrão será start.
  • Shorthand place-content: Use place-content para concisão quando align-content e justify-content tiverem os mesmos valores ou quando você quiser defini-los juntos.

Dominar essas propriedades de alinhamento do conteúdo do grid é essencial para ter controle total sobre a aparência dos seus layouts Grid, garantindo que o grid como um todo esteja sempre posicionado e distribuído da maneira que você deseja dentro do seu contêiner.