Propriedade de Posicionamento de Linha do Grid
Última atualização: 2026-09-13
grid-row Propriedade de Posicionamento de Linha do Grid
grid-row é o shorthand para grid-row-start e grid-row-end. Posiciona um item do grid na direção vertical. Ao especificar os números de linha de grade inicial e final, você controla quantas linhas o item abrange. Em conjunto com grid-column, oferece controle preciso sobre a posição e o tamanho de um item.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
grid-row: <grid-line> [ / <grid-line> ]?;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<grid-line> / <grid-line> | Valor | Posicionamento da linha do grid |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-row | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： grid-row: span 2 abrange duas linhas e é escrita da mesma forma que grid-column.
Dica： As linhas de linha são numeradas a partir de 1 no topo. Números negativos contam a partir de baixo, e -1 é a linha mais inferior.
❓ Perguntas Frequentes
Qgrid-row e grid-column podem ser usados juntos?
ASim. As duas propriedades controlam o posicionamento vertical e horizontal de forma independente — são ortogonais — e costumam ser combinadas. Por exemplo, grid-row: 1 / 3 com grid-column: 2 / 4 faz um item abranger duas linhas e duas colunas. Quando você posiciona apenas uma direção, a outra usa o posicionamento automático. Para definir os quatro valores de linha de grade de uma vez, use grid-area.
QComo faço um item do grid se estender automaticamente até o final?
AUse grid-row: 1 / -1 para abranger da primeira linha até a última. O -1 refere-se à linha de grade final, então o item ainda termina na última linha mesmo quando o número de linhas muda. Da mesma forma, grid-column: 1 / -1 faz um item abranger toda a largura de uma linha. A indexação negativa é a forma mais prática de lidar com um número desconhecido de trilhas no posicionamento do grid.
QPosso usar grid-row: span 2 sozinho?
ASim. Com apenas um valor span, a linha inicial passa a ser auto e o navegador posiciona o item na posição escolhida pelo algoritmo de posicionamento automático, depois o estende por duas linhas para baixo — bom para listas com quantidade de itens desconhecida. Para também controlar a posição inicial, escreva grid-row: 2 / span 2, ou seja, comece na linha 2 e abranja duas linhas para baixo. A forma span é mais estável do que uma linha final codificada quando as linhas são reorganizadas.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Posicionamento de Coluna do Grid
Posiciona um item do grid horizontalmente
Shorthand de Área do Grid
Shorthand que posiciona um item em linhas e colunas de uma vez
