Propriedades justify-items, align-items, place-items: Alinhando itens dentro das células

Controle o alinhamento dos itens grid dentro de suas respectivas células.

Você já sabe como posicionar seus Itens Grid em células específicas e como definir o tamanho dessas células. Mas e se o Item Grid for menor que a célula que ele ocupa? Como você controla o alinhamento desse item dentro da célula?

É para isso que servem as propriedades justify-items, align-items e place-items. Elas são aplicadas ao Contêiner Grid e controlam o alinhamento de todos os Itens Grid dentro de suas respectivas células.

Pense nisso como organizar um objeto dentro de uma caixa. A caixa (célula) pode ser maior que o objeto (Item Grid). Você pode querer que o objeto fique no centro da caixa, no canto superior esquerdo, ou esticado para preencher a caixa.

Entendendo os Eixos de Alinhamento

No CSS Grid, o alinhamento ocorre em dois eixos dentro de cada célula:

  • Eixo da Linha (Inline/Horizontal): Controlado por justify-items. Alinha o Item Grid horizontalmente dentro da célula.
  • Eixo da Coluna (Block/Vertical): Controlado por align-items. Alinha o Item Grid verticalmente dentro da célula.

Propriedades de Alinhamento de Itens

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

Aplicado ao Contêiner Grid. Define o alinhamento padrão de todos os Itens Grid ao longo do eixo da linha (horizontal) dentro de suas células.

Valores:

  • stretch (padrão): O Item Grid se estica para preencher toda a largura da célula.
  • start: O Item Grid é alinhado ao início da célula (esquerda em ltr).
  • end: O Item Grid é alinhado ao fim da célula (direita em ltr).
  • center: O Item Grid é centralizado horizontalmente na célula.

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

Aplicado ao Contêiner Grid. Define o alinhamento padrão de todos os Itens Grid ao longo do eixo da coluna (vertical) dentro de suas células.

Valores:

  • stretch (padrão): O Item Grid se estica para preencher toda a altura da célula.
  • start: O Item Grid é alinhado ao início da célula (topo).
  • end: O Item Grid é alinhado ao fim da célula (base).
  • center: O Item Grid é centralizado verticalmente na célula.
  • baseline: Alinha os itens com base em sua linha de base de texto.

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

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

Sintaxe:

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

Exemplos:

  • place-items: center;

    • Equivalente a: align-items: center; justify-items: center;
    • Centraliza os itens tanto vertical quanto horizontalmente dentro de suas células.

  • place-items: start end;

    • Equivalente a: align-items: start; justify-items: end;
    • Alinha os itens ao topo e à direita de suas células.

justify-self e align-self: Alinhamento Individual

Assim como no Flexbox com align-self, o Grid também tem propriedades para sobrescrever o alinhamento de itens individuais:

  • justify-self: Aplicado ao Item Grid. Sobrescreve justify-items para um item específico.
  • align-self: Aplicado ao Item Grid. Sobrescreve align-items para um item específico.

Essas propriedades aceitam os mesmos valores (stretch, start, end, center, baseline).

Exemplo Prático:

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

    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 150px); /* 3 colunas fixas */
      grid-template-rows: repeat(2, 100px); /* 2 linhas fixas */
      gap: 10px;
      background-color: #e0e0e0;
      border: 2px solid #333;
      padding: 10px;
      width: fit-content; /* Ajusta a largura ao conteúdo */
      margin: 0 auto 30px auto;
    }

    .grid-item {
      background-color: lightblue;
      border: 1px solid blue;
      padding: 15px;
      color: #333;
      font-weight: bold;
      /* Remove o display: flex para que o item não preencha a célula por padrão */
      /* e possamos ver o efeito do alinhamento */
      /* display: flex; */
      /* justify-content: center; */
      /* align-items: center; */
      width: 80px; /* Largura menor que a célula */
      height: 40px; /* Altura menor que a célula */
    }

    /* --- Exemplos de alinhamento --- */

    .container-stretch {
      /* Padrão: stretch stretch */
    }

    .container-center {
      justify-items: center;
      align-items: center;
      background-color: lightcoral;
    }

    .container-start-end {
      justify-items: start;
      align-items: end;
      background-color: lightgreen;
    }

    .container-place-items {
      place-items: end center; /* align-items: end; justify-items: center; */
      background-color: lightgoldenrodyellow;
    }

    /* Exemplo de alinhamento individual */
    .container-individual .item-override {
      background-color: lightsalmon;
      justify-self: end; /* Sobrescreve o justify-items do contêiner */
      align-self: start; /* Sobrescreve o align-items do contêiner */
    }
  </style>
</head>
<body>
  <h1>Alinhando Itens Grid dentro das Células</h1>

  <h2>Padrão: `stretch` (itens preenchem a célula)</h2>
  <div class="grid-container container-stretch">
    <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>

  <h2>`justify-items: center; align-items: center;` (Centralizado)</h2>
  <div class="grid-container container-center">
    <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>

  <h2>`justify-items: start; align-items: end;` (Topo Esquerdo)</h2>
  <div class="grid-container container-start-end">
    <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>

  <h2>`place-items: end center;` (Shorthand: Base Centralizado)</h2>
  <div class="grid-container container-place-items">
    <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>

  <h2>Alinhamento Individual com `justify-self` e `align-self`</h2>
  <div class="grid-container container-individual">
    <div class="grid-item">Item 1 (Padrão)</div>
    <div class="grid-item item-override">Item 2 (Individual)</div>
    <div class="grid-item">Item 3 (Padrão)</div>
    <div class="grid-item item-override">Item 4 (Individual)</div>
    <div class="grid-item">Item 5 (Padrão)</div>
    <div class="grid-item item-override">Item 6 (Individual)</div>
  </div>
  <p>No último exemplo, o contêiner não tem alinhamento explícito, então o padrão é `stretch`. Mas os itens com a classe `item-override` sobrescrevem esse comportamento.</p>
</body>
</html>

Resultado:

  • Você verá vários contêineres grid, cada um demonstrando um tipo diferente de alinhamento dos itens dentro de suas células.
  • Observe como os itens se movem dentro de suas células de acordo com as propriedades aplicadas ao contêiner ou individualmente.

Boas Práticas:

  • stretch é o padrão: Lembre-se que o comportamento padrão é stretch, o que significa que os itens tentarão preencher a célula. Se você quer ver o efeito de start, end ou center, certifique-se de que o Item Grid seja menor que a célula (ex: definindo width e height fixos para o item).
  • Contêiner vs. Item: justify-items, align-items, place-items são para o Contêiner Grid (afetam todos os filhos). justify-self e align-self são para o Item Grid (afetam um item específico).
  • Shorthand place-items: Use place-items para concisão quando align-items e justify-items tiverem os mesmos valores ou quando você quiser defini-los juntos.
  • Alinhamento Individual: Use justify-self e align-self quando precisar de um "pedido especial" para um item que deve se comportar de forma diferente dos outros.

Dominar essas propriedades de alinhamento é crucial para ter controle total sobre a aparência dos seus layouts Grid, garantindo que seus elementos estejam sempre onde você deseja, mesmo quando o espaço varia.