Propriedade CSS justify-items

A propriedade CSS justify-items define o alinhamento padrão para todos os itens dentro de um contêiner ao longo do eixo inline (linha) — em um idioma da esquerda para a direita, isso significa a direção horizontal. Ela é definida no contêiner e age como um justify-self padrão para todos os seus filhos ao mesmo tempo. Qualquer item individual ainda pode substituir esse padrão com seu próprio valor justify-self.

Em um CSS Grid, justify-items controla onde cada item fica horizontalmente dentro de sua própria célula da grade — à esquerda, à direita, centralizado ou esticado para preencher a célula. A propriedade complementar align-items faz o mesmo ao longo do eixo de bloco (coluna), e o atalho place-items define ambos em uma única declaração.

Quando usar

Use justify-items sempre que você tiver uma grade e quiser que todas as células compartilhem o mesmo posicionamento horizontal sem precisar escrever justify-self em cada item. Casos típicos:

Centralizar conteúdo dentro de cada célula da grade (center).
Empurrar as células para a borda inicial ou final (start / end).
Permitir que os itens se estiquem para preencher toda a largura da célula (stretch, o padrão da grade).

Nota: justify-items se aplica a contêineres de grade e elementos com posicionamento absoluto. É ignorado no Flexbox — use justify-content para distribuir itens flex ao longo do eixo principal.

Valor Inicial	auto
Aplica-se a	Contêineres de grade e elementos com posicionamento absoluto.
Herdado	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.justifyItems = "start";

Sintaxe

Valores CSS justify-items

justify-items: auto | normal | start | end | flex-start | flex-end | self-start | self-end | center | left | right | baseline | first-baseline | last-baseline | stretch | safe | unsafe | legacy | initial | inherit;

Exemplo: justify-items com o valor "start"

Exemplo de código CSS justify-items

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 5px;
        justify-items: start;
        background-color: #cccccc;
      }
      #example > div {
        padding: 10px;
        font-size: 20px;
        color: white;
        width: 100px;
        height: 50px;
      }
      .one {
        background-color: #1c87c9;
      }
      .two {
        background-color: #8ebf42;
      }
      .three {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Com justify-items: start, cada item é puxado para a borda esquerda de sua célula de grade. Mude o valor para center, end ou stretch (abaixo) para ver os itens se moverem dentro das mesmas células.

Exemplo: justify-items com o valor "center"

Exemplo CSS justify-items center

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 5px;
        justify-items: center;
        background-color: #cccccc;
      }
      #example > div {
        padding: 10px;
        font-size: 20px;
        color: white;
        width: 100px;
        height: 50px;
      }
      .one {
        background-color: #1c87c9;
      }
      .two {
        background-color: #8ebf42;
      }
      .three {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo: justify-items com o valor "first-baseline"

Exemplo da propriedade justify-items com o valor "first-baseline":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        display: grid;
        padding-top: 10px;
        height: 250px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        background: #ccc;
        justify-items: first-baseline;
      }
      .item {
        width: 50%;
        height: 50%;
        text-align: center;
      }
      .item1 {
        background: red;
      }
      .item2 {
        background: blue;
      }
      .item3 {
        background: green;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div class="container">
      <div class="item1 item">1</div>
      <div class="item2 item">2</div>
      <div class="item3 item">3</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Exemplo: justify-items com o valor "self-end"

Exemplo da propriedade justify-items com o valor "self-end":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 5px;
        justify-items: self-end;
        background-color: #cccccc;
      }
      #example > div {
        padding: 10px;
        font-size: 20px;
        color: white;
        width: 100px;
        height: 50px;
      }
      .one {
        background-color: #1c87c9;
      }
      .two {
        background-color: #8ebf42;
      }
      .three {
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Justify-items property example</h2>
    <div id="example">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição
auto	Se a caixa não tem pai ou está posicionada de forma absoluta, o valor auto representa normal.
normal	O efeito depende do modo de layout: • Layouts de bloco: comporta-se como `start`. • Layouts absolutamente posicionados: comporta-se como `start` para elementos substituídos, e `stretch` para os demais. • Células de tabela: ignorado. • Flexbox: ignorado. • Layouts de grade: comporta-se como `stretch`, exceto para itens com proporção de aspecto ou tamanho intrínseco, nos quais se comporta como `start`.
start	Todos os elementos são posicionados juntos na borda inicial (esquerda) do contêiner.
end	Todos os elementos são posicionados juntos na borda final (direita) do contêiner.
flex-start	Os itens são colocados no início do contêiner.
flex-end	Os itens são colocados no final do contêiner.
self-start	O item pode se posicionar na borda do contêiner com base em seu próprio lado inicial.
self-end	O item pode se posicionar na borda do contêiner com base em seu próprio lado final.
center	Os itens são posicionados próximos uns dos outros em direção ao centro do contêiner.
left	Os itens são colocados próximos uns dos outros em direção ao lado esquerdo do contêiner. Se o eixo da propriedade não for paralelo ao eixo inline, este valor se comporta como end.
right	Os itens são colocados próximos uns dos outros em direção ao lado direito do contêiner. Se o eixo da propriedade não for paralelo ao eixo inline, este valor se comporta como start.
baseline	Alinha todos os elementos dentro de um grupo combinando suas linhas de base de alinhamento.
first-baseline	Alinha todos os elementos dentro de um grupo combinando suas primeiras linhas de base de alinhamento.
last-baseline	Alinha todos os elementos dentro de um grupo combinando suas últimas linhas de base de alinhamento.
stretch	Estica o elemento para preencher o contêiner ao longo do eixo inline/principal.
safe	Se o tamanho do item ultrapassa o contêiner de alinhamento, o item é alinhado como se o modo de alinhamento fosse start.
unsafe	Independentemente do tamanho do item e do contêiner de alinhamento, o valor de alinhamento é respeitado.
legacy	Palavra-chave legada para compatibilidade com versões anteriores. Mapeia para `flex-start`, `flex-end` ou `center` dependendo do modo de layout. Não afeta a herança.
initial	Faz a propriedade usar seu valor padrão.
inherit	Herda a propriedade de seu elemento pai.

justify-items vs justify-self

Essas duas propriedades parecem semelhantes, mas estão em elementos diferentes:

justify-items é definido no contêiner e fornece um alinhamento horizontal padrão para todos os seus itens.
justify-self é definido em um item individual e substitui o justify-items do contêiner apenas para aquele item específico.

Portanto, um padrão comum é definir um valor padrão com justify-items na grade e, em seguida, ajustar um ou dois itens especiais com justify-self.

justify-items vs align-items

justify-items e align-items atuam em eixos perpendiculares:

justify-items → eixo inline (linha) — posicionamento horizontal em um documento da esquerda para a direita.
align-items → eixo de bloco (coluna) — posicionamento vertical.

Para definir ambos ao mesmo tempo, use o atalho place-items: place-items: <align-items> <justify-items>.

Suporte nos navegadores

justify-items é suportado em todos os navegadores modernos (Chrome, Edge, Firefox, Safari e Opera) como parte do módulo CSS Box Alignment. Seu principal caso de uso — alinhamento dentro do CSS Grid — também é amplamente suportado.

Prática

O que a propriedade CSS 'justify-items' faz?

Alinha itens de grade ao longo do eixo horizontal/coluna.Define a cor dos itens de grade.Alinha itens de grade ao longo do eixo vertical/linha.Define o tamanho dos itens de grade.Funciona dentro do modelo de layout de grade.