Propriedade CSS place-items
A propriedade place-items é um atalho para definir align-items e justify-items em CSS. Veja os valores e experimente os exemplos.
A propriedade CSS place-items é um atalho que define duas propriedades de alinhamento de uma vez:
- align-items — alinhamento ao longo do eixo de bloco (em um layout padrão, a direção vertical/coluna).
- justify-items — alinhamento ao longo do eixo inline (em um layout padrão, a direção horizontal/linha).
Em vez de escrever ambas as propriedades separadamente, você escreve uma única declaração place-items. Isso é mais útil em layouts Grid, onde controla como cada item é posicionado dentro de sua própria célula de grade (os padrões de alinhamento aplicados a cada item, equivalente a definir place-self em cada um).
Esta página aborda a sintaxe, as formas com um e dois valores, cada valor com o que ele realmente faz e os layouts onde place-items não tem efeito.
Quando place-items se aplica?
place-items só tem efeito em layouts que possuem a noção de "itens":
- Layouts Grid — o caso de uso principal. Alinha cada item dentro de sua área de grade.
- Caixas com posicionamento absoluto — alinha a caixa dentro de seu bloco de contenção.
É ignorado nos seguintes casos, o que é uma fonte comum de confusão:
- Layouts Flexbox —
justify-items(e, portanto, a metade inline deplace-items) não tem efeito no Flexbox. Use justify-content ealign-itemsdiretamente. - Caixas em nível de bloco padrão.
- Células de tabela.
place-items se comporta de forma diferente dependendo do contexto de layout — o mesmo valor pode significar coisas diferentes no Grid versus no posicionamento absoluto. A tabela de Valores abaixo detalha cada caso.
| Valor Inicial | normal legacy |
|---|---|
| Aplica-se a | Todos os elementos. |
| Herdado | Não. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.placeItems = "normal"; |
Sintaxe
place-items: <align-items> <justify-items>?;As palavras-chave aceitas são:
place-items: auto | normal | start | end | self-start | self-end | center | left | right | baseline | first baseline | last baseline | stretch | initial | inherit;Existem duas formas:
- Um valor — define ambos os eixos.
place-items: center;significa "centralizar verticalmente e centralizar horizontalmente." - Dois valores — o primeiro define align-items (eixo de bloco), o segundo define justify-items (eixo inline). Por exemplo,
place-items: start end;significa "topo verticalmente, direita horizontalmente."
A especificação do CSS Grid separa os dois valores com um espaço (place-items: start end), não com uma barra. Você ainda pode ver uma barra em materiais mais antigos; um único valor é a forma mais segura e com maior suporte.
Exemplo — valor único (start)
Uma única palavra-chave alinha os itens em ambos os eixos ao mesmo tempo. Aqui start empurra o item para o canto superior esquerdo de sua célula de grade:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#container {
height: 150px;
width: 150px;
place-items: start;
background-color: #ccc;
display: grid;
}
div > div {
box-sizing: border-box;
border: 1px solid #666;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#box1 {
background-color: #1c87c9;
min-height: 50px;
}
</style>
</head>
<body>
<h2>Place-items property example</h2>
<h3>place-items: start</h3>
<div id="container">
<div id="box1">1</div>
</div>
</body>
</html>Resultado
Exemplo — dois valores (end start)
Com duas palavras-chave você controla cada eixo de forma independente. Aqui end start envia o item para a parte inferior (eixo de bloco) e para a esquerda (eixo inline):
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#container {
height: 150px;
width: 150px;
place-items: end start;
background-color: #ccc;
display: grid;
}
div > div {
box-sizing: border-box;
border: 1px solid #666;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#box1 {
background-color: #8ebf42;
min-height: 50px;
}
</style>
</head>
<body>
<h2>place-items: end start</h2>
<div id="container">
<div id="box1">1</div>
</div>
</body>
</html>Exemplo — valor center
Uma única palavra-chave center centraliza cada item tanto verticalmente quanto horizontalmente dentro de sua célula de grade:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
#container {
height: 200px;
width: 230px;
place-items: center;
background-color: #ccc;
display: grid;
}
.grid {
display: grid;
}
div > div {
box-sizing: border-box;
border: 3px solid #ccc;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#box1 {
background-color: #666;
min-height: 40px;
}
#box2 {
background-color: #1c87c9;
min-height: 50px;
}
#box3 {
background-color: #fff;
min-height: 40px;
}
#box4 {
background-color: #ff0000;
min-height: 60px;
}
#box5 {
background-color: #eee;
min-height: 70px;
}
#box6 {
background-color: #8ebf42;
min-height: 50px;
}
</style>
</head>
<body>
<h2>Place-items property example</h2>
<div id="container" class="grid">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
<div id="box5">5</div>
<div id="box6">6</div>
</div>
</body>
</html>Valores
| Valor | Descrição |
|---|---|
| auto | Se a caixa não tem um pai, ou está posicionada de forma absoluta, o valor "auto" representa "normal". |
| normal | O efeito deste valor depende do modo de layout: - Em layouts em nível de bloco, o valor "normal" se comporta como "start". - Em layouts com posicionamento absoluto, este valor se comporta como "start" em caixas absolutamente posicionadas substituídas, e como stretch em todas as outras caixas absolutamente posicionadas. - Em layouts de células de tabela, esta propriedade é ignorada. - Em layouts Flexbox, esta propriedade é ignorada. - Em layouts Grid, este valor se comporta como "stretch", exceto para caixas com uma proporção de aspecto ou tamanhos intrínsecos onde se comporta como "start". |
| start | Alinha o item à borda inicial de sua área de grade (topo no eixo de bloco, esquerda no eixo inline em um layout da esquerda para a direita). |
| end | Alinha o item à borda final de sua área de grade (base no eixo de bloco, direita no eixo inline em um layout da esquerda para a direita). |
| 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 fazendo corresponder suas linhas de base de alinhamento. |
| first baseline | Alinha a primeira linha de base do elemento com a primeira linha de base da linha. |
| last baseline | Alinha a última linha de base do elemento com a última linha de base da linha. |
| stretch | Estica o elemento para ambas as bordas do contêiner vertical e horizontalmente para preencher o contêiner. |
| initial | Faz a propriedade usar seu valor padrão. |
| inherit | Herda a propriedade de seu elemento pai. |
Propriedades relacionadas
- align-items — a metade do eixo de bloco deste atalho.
- justify-items — a metade do eixo inline deste atalho.
- grid — o layout onde
place-itemsé mais útil. - justify-content — o que usar em vez disso no Flexbox.