Propriedade Shorthand de Place Content
Última atualização: 2026-09-13
place-content Propriedade Shorthand de Place Content
place-content é um shorthand para align-content e justify-content. Em um contêiner de grid, controla como toda a área de conteúdo do grid se alinha em relação ao contêiner. Quando o tamanho total das trilhas do grid é menor que o contêiner, essa propriedade decide como o espaço restante é distribuído. É a chave para centralizar e distribuir o grid inteiro.
| Categoria | |
|---|---|
| Valor Inicial | normal |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
place-content: <align-content> <justify-content>?;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<align-content> / <justify-content> | Valor | Shorthand de alinhamento de conteúdo |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| place-content | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： place-content: center centraliza o grid inteiro tanto horizontal quanto verticalmente no contêiner.
Dica： Valores como space-between, space-around e space-evenly controlam como o espaço é distribuído entre as trilhas do grid.
❓ Perguntas Frequentes
QQuando place-content realmente surte efeito?
AApenas quando o tamanho total das trilhas do grid (incluindo gap) for menor que o contêiner. O navegador então alinha e distribui o espaço restante de acordo com o valor de place-content. Se as trilhas preenchem o contêiner adaptando-se com unidades fr, ou se o contêiner é dimensionado pelo conteúdo sem espaço livre, a propriedade não mostra efeito visível. Para fazer funcionar, dimensione as trilhas com valores fixos ou minmax e dê ao contêiner uma largura e altura definidas.
QDevo usar place-content ou place-items?
AEles atuam em níveis diferentes e são frequentemente usados juntos. place-content posiciona toda a área de conteúdo do grid dentro do contêiner, respondendo "o grid é menor que o contêiner, como eu o disponho". place-items alinha cada item do grid dentro de sua própria célula, respondendo "como eu arrumo os itens dentro de cada célula". Centralize o grupo com place-content; centralize os itens com place-items.
QPor que place-content: center às vezes não faz nada em um grid?
AO motivo mais comum é que o grid preenche o contêiner: trilhas dimensionadas com fr absorvem todo o espaço restante automaticamente, então não há área livre para place-content atuar. Outro motivo é que a altura do contêiner vem do conteúdo, não sobrando espaço. Para centralizar o grid inteiro com place-content: center, dimensione as trilhas com valores fixos ou minmax e dê ao contêiner dimensões explícitas.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Place Items
Controla como cada item do grid se alinha em sua célula
Place Self
Controla o alinhamento de um único item do grid
