Propriedade de Trilha de Linha Implícita
Última atualização: 2026-09-13
grid-auto-rows Propriedade de Trilha de Linha Implícita
A propriedade grid-auto-rows controla a altura das trilhas de linha criadas implicitamente em um contêiner de grid. Quando um item do grid é posicionado em uma linha que grid-template-rows não definiu, o navegador cria automaticamente uma linha implícita; essa propriedade define o tamanho dessas linhas criadas automaticamente. Ela garante que as linhas não definidas explicitamente ainda tenham uma altura consistente.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
grid-auto-rows: <track-size>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | Palavra-chave | Calculado automaticamente |
<length> | <percentage> | Tipo | Altura fixa de linha implícita |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-auto-rows | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： grid-auto-rows: auto torna as alturas das linhas implícitas totalmente dependentes do conteúdo, o que pode produzir alturas de linha irregulares.
Dica： minmax(80px, auto) garante uma altura mínima enquanto deixa as linhas com mais conteúdo crescerem automaticamente.
❓ Perguntas Frequentes
QQual é o valor padrão de grid-auto-rows?
AO padrão é auto: a altura de uma linha implícita é decidida pelo conteúdo mais alto do item naquela linha. É por isso que, sem grid-auto-rows, as linhas em um grid de várias linhas variam com o conteúdo. Lembre-se de que as linhas implícitas existem apenas para itens posicionados além das linhas explícitas definidas por grid-template-rows; as linhas que você declarou explicitamente são dimensionadas por essa propriedade, enquanto todas as outras linhas recorrem a grid-auto-rows. Para forçar linhas uniformes, defina explicitamente grid-auto-rows: 100px ou minmax(100px, auto) para substituir o comportamento padrão.
QComo faço todas as linhas ficarem com a mesma altura?
ADefina grid-auto-rows: 1fr ou uma altura fixa como 100px para que as linhas implícitas correspondam às explícitas. O 1fr convém para linhas que devem escalar com o contêiner, mas só faz sentido quando o contêiner tem uma altura definida; caso contrário, a linha colapsa para o tamanho do conteúdo. Um valor fixo convém para listas de cartões que precisam de uma aparência uniforme e arrumada. Se a quantidade de linhas for fixa e a estrutura for clara, definir todas as linhas com grid-template-rows é mais limpo.
QO que significa grid-auto-rows: minmax(100px, auto)?
Aminmax define um intervalo para as alturas das linhas: mínimo de 100px e máximo auto (crescendo com o conteúdo), então cada linha tem pelo menos 100px de altura e cresce automaticamente quando o conteúdo é mais alto, sem nunca cortá-lo. Em comparação com uma altura fixa, minmax(100px, auto) mantém os cartões arrumados e o conteúdo seguro; em comparação com o auto puro, evita que as linhas fiquem muito curtas e visualmente esparsas quando há pouco conteúdo.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Trilhas de Coluna Implícitas
Controla a largura das colunas implícitas
Trilhas de Linha do Grid
Define a estrutura das linhas explícitas
