Propriedade Shorthand de Place Self
Última atualização: 2026-09-13
place-self Propriedade Shorthand de Place Self
place-self é um shorthand para align-self e justify-self. Controla o alinhamento de um único item do grid dentro de sua célula. Diferente de place-items, place-self é definido no item individual do grid e substitui a configuração de place-items no nível do contêiner, atendendo a necessidades de alinhamento especiais de um item.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
place-self: <align-self> <justify-self>?;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<align-self> / <justify-self> | Valor | Shorthand de alinhamento de um único item |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| place-self | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： place-self: center centraliza um único item do grid em sua célula, independentemente da configuração de place-items do contêiner.
Dica： O valor auto herda o place-items do contêiner e é o comportamento padrão.
❓ Perguntas Frequentes
QQual tem prioridade maior, place-self ou place-items?
Aplace-self tem a prioridade maior. place-items é definido no contêiner e define o alinhamento padrão de cada item do grid, enquanto place-self é definido em um único item e substitui esse padrão apenas para aquele item, então o restante dos itens mantém o comportamento do contêiner. Essa é a mesma regra pela qual align-self e justify-self substituem align-items e justify-items.
Qplace-self pode substituir apenas uma direção?
ASim. Com um único valor, aplica-se a ambas as direções: place-self: center centraliza o item tanto horizontal quanto verticalmente. Com dois valores, o primeiro controla a direção vertical (align-self) e o segundo a direção horizontal (justify-self), então place-self: start end significa alinhamento ao topo mais à direita. A mesma regra de valor único/dois valores de place-items se aplica, e o shorthand aceita o conjunto completo de palavras-chave de ambos align-self e justify-self. Quando o segundo valor é omitido, ele assume automaticamente o primeiro.
QO que significa place-self: auto?
Aauto significa "use as configurações padrão do contêiner", ou seja, herda o align-items e o justify-items do contêiner, que juntos formam seu place-items. O valor padrão de place-self é auto, então os itens seguem o alinhamento do contêiner quando nada é definido. Como place-self é um shorthand, escrever place-self: auto redefine tanto align-self quanto justify-self de uma vez; use as propriedades completas se quiser redefinir apenas um eixo. Escrever place-self: auto explicitamente é equivalente a não defini-lo e é frequentemente usado para substituir um estilo compartilhado herdado.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Place Items
Define o alinhamento de todos os itens do grid no contêiner
Place Content
Controla como o grid inteiro se alinha dentro do contêiner
