Propriedade grid
Última atualização: 2026-09-13
grid Propriedade grid
A propriedade grid é o atalho do CSS Grid. Em uma única declaração, define as trilhas explícitas, as trilhas automáticas e a direção de auto-fluxo de um contêiner grid. É a soma das famílias grid-template e grid-auto, e o atalho de grid mais completo quando você quer descrever toda a estrutura do grid.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | todos |
| Tipo de Animação | discrete |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
grid: <grid-template> | <grid-template-rows> / [ <grid-auto-flow>? <grid-auto-columns>? ]?;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<grid-template> | Tipo | Atalho da grade explícita |
<grid-template-rows> / [ <grid-auto-flow>? <grid-auto-columns>? ] | Valor | Atalho de linhas/colunas |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： No atalho grid, as trilhas antes da barra / são as linhas e as trilhas depois dela são as colunas, seguindo a mesma ordem de escrita de grid-template.
Aviso： O atalho grid redefine toda propriedade de grid não declarada explicitamente, como grid-auto-flow. Tenha esse escopo de redefinição em mente ao usá-lo.
❓ Perguntas Frequentes
QQual é a diferença entre grid e grid-template?
AO grid é o atalho mais abrangente: redefine as trilhas explícitas, as trilhas implícitas e a direção de auto-posicionamento de uma vez, o que é útil para inicializar o grid limpo. O grid-template define apenas as trilhas explícitas (linhas, colunas, áreas) e deixa as propriedades grid-auto-* intocadas, então tem menos efeitos colaterais e é melhor quando você só precisa ajustar a estrutura explícita.
QQuando devo usar o atalho grid?
AUse o atalho grid quando precisar definir toda a estrutura do grid de uma vez, ou quando quiser redefinir todas as propriedades relacionadas ao grid. Se você só quer mudar uma parte, como a largura da coluna, use uma propriedade única como grid-template-columns, para o atalho não redefinir acidentalmente outras configurações. Escolha um estilo para a equipe e mantenha-o, pois misturar estilos causa redefinições ocultas.
QComo grid: 200px 1fr / 1fr 2fr mapeia para linhas e colunas?
ANo atalho grid, o lado esquerdo da barra é grid-template-rows (linhas) e o lado direito é grid-template-columns (colunas). Assim, grid: 200px 1fr / 1fr 2fr define duas linhas (200px e 1fr) e duas colunas (1fr e 2fr). Lembre-se: "linhas primeiro, colunas depois" — é o oposto da intuição de escrever apenas colunas — e verifique o resultado no navegador.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Trilhas de Coluna do Grid
Define a estrutura das colunas do grid.
Auto Fluxo do Grid
Controla a direção em que os itens do grid são posicionados automaticamente.
