Proprietà CSS grid-row
Scopri come la proprietà CSS grid-row posiziona e ridimensiona gli elementi della griglia sulle righe, con sintassi, valori ed esempi.
La proprietà CSS grid-row imposta la posizione e la dimensione di un elemento della griglia all'interno delle righe di una CSS grid. È una scorciatoia che combina grid-row-start e grid-row-end in un'unica dichiarazione, controllando su quale linea di riga inizia l'elemento e su quale linea termina.
Una griglia è divisa da linee di riga orizzontali numerate a partire da 1 sul bordo superiore. grid-row indica a un elemento di estendersi da una linea di inizio a una linea di fine. Per il controllo indipendente di ciascun bordo, usa direttamente le proprietà longhand:
- grid-row-start — la linea dove inizia l'elemento.
- grid-row-end — la linea dove termina l'elemento.
Quindi grid-row: 1 / 3 è esattamente equivalente a scrivere grid-row-start: 1; grid-row-end: 3.
| Valore iniziale | auto / auto |
|---|---|
| Si applica a | Elementi della griglia |
| Ereditato | No |
| Animabile | Sì |
| Versione | CSS Grid Layout Module Level 1 |
| Sintassi DOM | object.style.gridRow = "1 / span 2" |
Sintassi
grid-row: <start-line> / <end-line>;Il valore prima della barra è la linea di inizio; il valore dopo è la linea di fine. La linea di fine è esclusiva — l'elemento riempie le tracce fino a quella linea ma non la include. Puoi combinare numeri di linea, span e linee con nome:
/* 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;Come vengono contate le linee di riga
Una griglia con tre righe esplicite ha quattro linee di riga: le linee 1, 2, 3 e 4. I numeri positivi contano dall'alto; i numeri negativi contano dal basso, quindi -1 è sempre l'ultima linea esplicita. Questo rende grid-row: 1 / -1 un modo affidabile per estendersi per tutta l'altezza della griglia esplicita indipendentemente dal numero di righe che contiene.
Se fai riferimento a una linea che non esiste — ad esempio grid-row: 1 / 6 su una griglia a tre righe — il browser crea righe implicite per soddisfarlo. Quelle righe implicite ottengono la loro dimensione da grid-auto-rows.
Esempio di base: posizionare un elemento su una riga specifica
L'elemento con classe .box viene spostato alla seconda riga impostando grid-row: 2 / 3. La prima riga viene lasciata vuota e gli elementi rimanenti scorrono nelle celle con posizionamento automatico.
<!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>Risultato
![CSS grid-row con due elementi](/uploads/media/default/0001/04/90bf26fe77ccc66f3b0039d2cc9a0232626ef7ca.png "CSS grid-row example result" =420x)
Estendere più righe con span
Usare grid-row: span 2 fa occupare all'elemento due righe senza specificare numeri di linea esatti. L'algoritmo di posizionamento automatico inserisce l'elemento dove si adatta e lo estende verso il basso di due righe. Gli elementi che seguono vengono spinti nelle celle disponibili successive.
<!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 usare grid-row
Ricorri a grid-row quando un elemento deve occupare una porzione verticale specifica della griglia anziché la singola cella che il posizionamento automatico gli assegnerebbe. Casi d'uso comuni:
- Barra laterale o pannello hero a piena altezza:
grid-row: 1 / -1estende un elemento dalla prima all'ultima linea di riga esplicita. - Riquadro in evidenza in una griglia di schede:
grid-row: span 2rende una scheda visivamente più alta delle sue vicine. - Ancoraggio a una linea esplicita:
grid-row: 2 / 4mantiene un elemento in una posizione verticale fissa anche quando il contenuto circostante cambia.
Per controllare il posizionamento orizzontale, usa la proprietà corrispondente grid-column. Per impostare entrambi gli assi contemporaneamente, la scorciatoia grid-area combina grid-row e grid-column in un'unica dichiarazione. Per definire come la griglia crea righe automaticamente, consulta grid-template-rows e grid-auto-rows.
Attenzione: i numeri di linea contano le linee tra le tracce, non le tracce stesse. Una griglia a tre righe ha quattro linee di riga (1–4). I numeri negativi contano dalla fine:
-1è l'ultima linea esplicita,-2è la penultima e così via. Segrid-rowfa riferimento a una linea oltre la griglia esplicita, il browser aggiunge righe implicite dimensionate dagrid-auto-rows.
Valori
| Valore | Descrizione |
|---|---|
<line> | Un numero intero (positivo o negativo) che fa riferimento a una specifica linea di riga della griglia. |
span <n> | L'elemento si estende su n tracce di riga. Può essere usato come valore di inizio o di fine. |
auto | Il valore predefinito — il posizionamento e l'estensione sono determinati dall'algoritmo di posizionamento automatico (una riga). |
initial | Ripristina la proprietà al suo valore iniziale (auto). |
inherit | Eredita il valore dall'elemento padre. |