Atributo CSS justify-items

Definição e uso

A propriedade justify-items é configurada no contenedor de grade para alinhar os elementos filhos (itens de grade) na direção das linhas.

Para páginas em inglês, a direção das linhas é de esquerda para direita e a direção do bloco é para baixo.

Para que essa propriedade tenha algum efeito de alinhamento, o item de grade precisa deixar espaço disponível ao redor de si mesmo na direção das linhas.

Dica:Para alinhar itens de grade na direção do bloco em vez da direção das linhas, use Propriedade align-items Propriedades.

Veja também:

Tutorial de CSS:CSS Grid

Tutorial de CSS:CSS Alinhamento

Manual de CSS:Propriedade align-items

Manual de CSS:Propriedade direction

Manual de CSS:Propriedade grid

Manual de CSS:Propriedade grid-template-columns

Manual de CSS:Propriedade justify-self

Manual de CSS:Propriedade position

Manual de CSS:Propriedade writing-mode

Exemplo

Exemplo 1

Alinhe cada item de grade no final da célula da grade na direção das linhas:

#container {
  display: grid;
  justify-items: end;
}

Experimente você mesmo

Exemplo 2: Comparação de justify-items e justify-self

Configure o alinhamento relativo do contenedor para 'centrado' e o alinhamento do item de grade para 'alinhamento à direita'. O valor da propriedade 'right' prevalece:

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

Experimente você mesmo

Exemplo 3: Definir justify-items em itens de grade com alinhamento absoluto

Configure o alinhamento do item de grade com alinhamento absoluto para 'alinhamento à direita':

#container {
  display: grid;
  position: relative;
  justify-items: right;
}
.blue {
  position: absolute;
}

Experimente você mesmo

Exemplo 4: writing-mode

Quando o valor da propriedade writing-mode do elemento contenedor de grade é definido como vertical-rl, a direção das linhas é para baixo. O resultado é que o ponto de partida do contenedor se move para o topo da esquerda e o extremo do contenedor se move para o fundo da direita:

#container {
  justify-items: end;
  writing-mode: vertical-rl;
}

Experimente você mesmo

Exemplo 5: direction

Quando o atributo direction do elemento contêiner da grade é definido como 'rtl', a direção da linha é de direita para esquerda. O resultado é que o ponto de partida do contêiner se move da esquerda para a direita e o ponto final do contêiner se move da direita para a esquerda:

#container {
  justify-items: start;
  direction: rtl;
}

Experimente você mesmo

Sintaxe do CSS

justify-items: legacy|normal|stretch|alinhamento-posicional|alinhamento-de-overflow|alinhamento-de-baseline|initial|inherit;

Valor da propriedade

Valor Descrição
legacy

Valor padrão.

Apenas quando começar com 'legacy', o item da grade com o valor 'auto' de justify-self herda o valor da propriedade justify-items do contêiner da grade.

Seu propósito é implementar o comportamento de alinhamento legado do elemento <center> do HTML e da propriedade align.
normal Depende do contexto do layout, mas é semelhante ao 'stretch' da grade de layout.
stretch Se o inline-size (largura) não for definido, estica para preencher a célula da grade.
start Alinha o item no início da direção da linha.
left Alinha o item à esquerda.
center Alinha o item ao centro.
end Alinha o item no final da direção da linha.
right Alinha o item à direita.
alinhamento-de-overflow
  • 'safe' ajustará o alinhamento do item para 'start', se o conteúdo transbordar.
  • 'unsafe' mantém o valor de alinhamento, independentemente de o conteúdo do item transbordar.
alinhamento-de-baseline O elemento alinha-se à linha de base do elemento pai.
initial Defina essa propriedade como seu valor padrão. Veja: initial.
inherit Herda essa propriedade do elemento pai. Veja: inherit.

Detalhes técnicos

Valor padrão: legacy
Herança: Não
Produção de animação: Não suportado. Veja:Propriedades relacionadas a animação.
Versão: CSS3
Sintaxe do JavaScript: object.style.justifyItems="center"

Suporte do navegador

Os números na tabela indicam a versão do navegador que suporta completamente essa propriedade.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0