Propriedade Shorthand de Place Items
Última atualização: 2026-09-13
place-items Propriedade Shorthand de Place Items
place-items é um shorthand para align-items e justify-items. Em um contêiner de grid, define como cada item do grid se alinha dentro de sua própria célula em uma única declaração. Controla tanto o alinhamento vertical (align) quanto o horizontal (justify) ao mesmo tempo, o que o torna uma ferramenta conveniente para centralizar ou alinhar o conteúdo do grid.
| Categoria | |
|---|---|
| Valor Inicial | normal |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
place-items: <align-items> <justify-items>?;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<align-items> / <justify-items> | Valor | Shorthand de alinhamento |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| place-items | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： Com um único valor, tanto align-items quanto justify-items o usam: place-items: center centraliza em ambas as direções.
Dica： place-items é definido no contêiner e afeta todos os itens do grid; para controlar um único item, use place-self.
❓ Perguntas Frequentes
QQual é a diferença entre place-items e place-content?
Aplace-items controla como cada item do grid se alinha dentro de sua própria célula. place-content controla como toda a área de conteúdo do grid se alinha dentro do contêiner, o que importa quando o tamanho total das trilhas é menor que o contêiner. O primeiro atua nos itens, o segundo no grupo, e ambos podem ser definidos ao mesmo tempo sem conflito. Se as trilhas já preenchem o contêiner, place-content não tem o que distribuir e apenas place-items ainda mostra um efeito visível, já que as células permanecem maiores que seu conteúdo.
Qplace-items também funciona em flexbox?
ASim. place-items é válido tanto em grid quanto em flexbox. Em flex, equivale a definir align-items e justify-items ao mesmo tempo, mas justify-items não tem efeito em flex porque os itens flex são dispostos ao longo do eixo principal sem células, então essa parte é ignorada. Para centralizar em ambas as direções, é melhor escrever explicitamente align-items: center e justify-content: center, que é a receita convencional de flexbox e funciona em todo navegador que suporta flex.
QQuais direções os dois valores em place-items: start end controlam?
AO primeiro valor corresponde a align-items (vertical) e o segundo a justify-items (horizontal). place-items: start end alinha os itens ao topo na vertical e à direita na horizontal. Essa ordem corresponde à convenção alinhar-e-depois-justificar usada em toda a família place-*, e um único valor sempre se aplica a ambos os eixos, então place-items: center centraliza tanto horizontal quanto verticalmente — a forma mais comum de centralizar conteúdo do grid.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Place Content
Controla como o grid inteiro se alinha dentro do contêiner
Place Self
Controla o alinhamento de um único item do grid
