Propriedade CSS grid-row
Aprenda como a propriedade abreviada CSS grid-row posiciona e dimensiona itens de grade em linhas, com sintaxe, valores e exemplos ao vivo.
A propriedade CSS grid-row define a posição e o tamanho de um item de grade dentro das linhas de um CSS grid. É uma propriedade abreviada que combina grid-row-start e grid-row-end em uma única declaração, controlando em qual linha o item começa e em qual linha termina.
Uma grade é dividida por linhas de linha horizontais numeradas a partir de 1 na borda superior. A propriedade grid-row instrui um item a se estender de uma linha de início a uma linha de fim. Para controle independente de cada borda, use as propriedades longas diretamente:
- grid-row-start — a linha onde o item começa.
- grid-row-end — a linha onde o item termina.
Portanto, grid-row: 1 / 3 é exatamente equivalente a escrever grid-row-start: 1; grid-row-end: 3.
| Valor Inicial | auto / auto |
|---|---|
| Aplica-se a | Itens de grade |
| Herdado | Não |
| Animável | Sim |
| Versão | CSS Grid Layout Module Level 1 |
| Sintaxe DOM | object.style.gridRow = "1 / span 2" |
Sintaxe
grid-row: <start-line> / <end-line>;O valor antes da barra é a linha de início; o valor após ela é a linha de fim. A linha de fim é exclusiva — o item preenche as faixas até essa linha, mas não a inclui. Você pode combinar números de linha, span e linhas nomeadas:
/* Explicit line numbers */
grid-row: 2 / 4; /* start at line 2, end at line 4 → spans rows 2 and 3 */
/* Span keyword */
grid-row: 2 / span 2; /* start at line 2, span 2 rows */
grid-row: span 3; /* span 3 rows from wherever auto-placement puts the item */
/* Negative line number */
grid-row: 1 / -1; /* from first line to last line (full height) */
/* Single value — sets start only; end defaults to auto (one row) */
grid-row: 3;Como as linhas de linha são contadas
Uma grade com três linhas explícitas tem quatro linhas de linha: linhas 1, 2, 3 e 4. Números positivos contam a partir do topo; números negativos contam a partir do final, portanto -1 é sempre a última linha explícita. Isso torna grid-row: 1 / -1 uma forma confiável de abranger toda a altura da grade explícita, independentemente de quantas linhas ela possui.
Se você referenciar uma linha que não existe — por exemplo grid-row: 1 / 6 em uma grade de três linhas — o navegador cria linhas implícitas para satisfazer a requisição. Essas linhas implícitas obtêm seu tamanho de grid-auto-rows.
Exemplo básico: posicionando um item em uma linha específica
O item com a classe .box é movido para a segunda linha definindo grid-row: 2 / 3. A primeira linha fica vazia e os itens restantes fluem para as células posicionadas automaticamente.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.box {
grid-row: 2 / 3;
}
</style>
</head>
<body>
<h2>Grid-row property example</h2>
<div class="grid-container">
<div class="box">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
</html>Resultado
![CSS grid-row com dois itens](/uploads/media/default/0001/04/90bf26fe77ccc66f3b0039d2cc9a0232626ef7ca.png "CSS grid-row example result" =420x)
Abrangendo múltiplas linhas com span
Usar grid-row: span 2 faz com que um item ocupe duas linhas sem especificar números de linha exatos. O algoritmo de posicionamento automático insere o item onde ele couber e o estica para baixo em duas linhas. Os itens seguintes são empurrados para as próximas células disponíveis.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.box {
grid-row: span 2;
}
</style>
</head>
<body>
<h2>Grid-row span 2 example</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div class="box">4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
</html>Quando usar grid-row
Use grid-row quando um item precisar ocupar uma fatia vertical específica da grade, em vez da célula única que o posicionamento automático atribuiria. Casos de uso comuns:
- Barra lateral ou painel hero em altura total:
grid-row: 1 / -1estica um item da primeira até a última linha explícita. - Tile em destaque em uma grade de cartões:
grid-row: span 2torna um cartão visualmente mais alto que seus vizinhos. - Fixar em uma linha explícita:
grid-row: 2 / 4mantém um elemento em uma posição vertical fixa, mesmo que o conteúdo ao redor mude.
Para controlar o posicionamento horizontal, use a propriedade correspondente grid-column. Para definir os dois eixos de uma vez, a abreviação grid-area combina grid-row e grid-column em uma única declaração. Para definir como a grade cria linhas automaticamente, consulte grid-template-rows e grid-auto-rows.
Atenção: os números de linha contam as linhas entre as faixas, não as faixas em si. Uma grade de três linhas tem quatro linhas de linha (1–4). Números negativos contam a partir do final:
-1é a última linha explícita,-2é a penúltima, e assim por diante. Segrid-rowreferenciar uma linha além da grade explícita, o navegador adicionará linhas implícitas dimensionadas porgrid-auto-rows.
Valores
| Valor | Descrição |
|---|---|
<line> | Um inteiro (positivo ou negativo) que referencia uma linha de grade específica. |
span <n> | O item abrange n faixas de linha. Pode ser usado como valor de início ou de fim. |
auto | O padrão — o posicionamento e a abrangência são determinados pelo algoritmo de posicionamento automático (uma linha). |
initial | Redefine a propriedade para seu valor inicial (auto). |
inherit | Herda o valor do elemento pai. |