Propriedade de Trilhas de Linha do Grid
Última atualização: 2026-09-13
grid-template-rows Propriedade de Trilhas de Linha do Grid
A propriedade grid-template-rows define o número e a altura das trilhas de linha em um contêiner grid. Ao especificar o tamanho de cada trilha de linha, você controla a estrutura das linhas com precisão. Usada em conjunto com grid-template-columns, forma o esqueleto básico do grid. Ela suporta comprimentos fixos, porcentagens, a unidade fr e funções como minmax().
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
grid-template-rows: none | <track-list> | <auto-track-list>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | Palavra-chave | Sem trilhas de linha explícitas |
<track-list> | Tipo | Lista de trilhas de linha |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-template-rows | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： Combinada com uma altura fixa do contêiner, 1fr faz uma linha do meio preencher o espaço restante automaticamente — um truque clássico para layouts de página.
Dica： A palavra-chave auto dimensiona a linha a partir de seu conteúdo, o que serve para linhas de altura variável.
❓ Perguntas Frequentes
Qgrid-template-rows exige uma altura fixa do contêiner?
ANão necessariamente. Sem uma altura explícita do contêiner, as trilhas de linha assumem o padrão auto e são esticadas pelo conteúdo mais alto do item naquela linha. Apenas quando você distribui as alturas das linhas proporcionalmente com unidades como fr é que o contêiner precisa de uma altura definida como base para o cálculo; caso contrário, fr degrada-se para a altura do conteúdo. Layouts de página inteira costumam dar ao contêiner height: 100vh ou uma altura fixa e usar auto 1fr auto para o esqueleto de cabeçalho, principal e rodapé.
QComo faço as alturas das linhas se adaptarem ao conteúdo?
AEscreva o tamanho da trilha de linha como auto, ou simplesmente omita grid-template-rows; a altura de cada linha é então decidida por seu conteúdo — mais conteúdo significa uma linha mais alta. Para impor uma altura mínima, use grid-auto-rows: minmax(100px, auto), que mantém as linhas com pelo menos 100px e as deixa crescer com o conteúdo. Observe que a unidade fr distribui a altura proporcionalmente e não pode se adaptar ao conteúdo.
QO que significa grid-template-rows: auto 1fr auto em um layout de página inteira?
AEste é o layout clássico de cabeçalho-principal-rodapé: a altura auto da primeira linha é decidida pelo conteúdo do cabeçalho, o 1fr da segunda linha absorve toda a altura restante do contêiner para que a área principal se estique com a contêiner, e a altura auto da terceira linha vem do conteúdo do rodapé. Combinado com grid-template-columns e uma altura de contêiner de 100vh, produz um esqueleto de página inteira onde a área principal é fluida enquanto o cabeçalho e o rodapé nunca transbordam.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Trilhas de Coluna do Grid
Define a estrutura das colunas do grid
Atalho Grid
Atalho que define um grid em uma declaração
