Proprietà CSS grid-row-end

La proprietà CSS grid-row-end imposta dove un elemento della griglia termina lungo l'asse a blocchi (riga). È possibile specificare un numero di linea di riga a cui fermarsi, uno span che indica quante righe deve coprire l'elemento, oppure auto per lasciare che il browser lo posizioni automaticamente. Insieme a grid-row-start, definisce i bordi iniziale e finale dell'area di griglia dell'elemento sull'asse a blocchi.

Come sono numerate le linee di riga della griglia

Una griglia è delimitata da linee numerate, non dalle tracce (righe) stesse. Una griglia con tre righe ha quattro linee orizzontali: la linea 1 scorre lungo il bordo superiore, la linea 4 lungo il bordo inferiore.

line:  1 ─────────────────────
         |  row 1             |
line:  2 ─────────────────────
         |  row 2             |
line:  3 ─────────────────────
         |  row 3             |
line:  4 ─────────────────────

grid-row-end fa riferimento a una di queste linee:

grid-row-end: 3 fa terminare l'elemento alla linea 3 — occupa le righe 1 e 2 se inizia alla linea 1.
grid-row-end: span 2 fa terminare l'elemento 2 righe dopo il suo punto di inizio, indipendentemente dal numero di linea assoluto.

È anche possibile contare dalla fine con numeri negativi: -1 è l'ultima linea (il bordo inferiore), -2 è quella sopra. Quindi grid-row-end: -1 raggiunge sempre il fondo della griglia esplicita indipendentemente da quante righe ha — utile per gli elementi "a tutta altezza".

Suggerimento: il valore descrive solo dove l'elemento si ferma. Da dove inizia dipende da grid-row-start (o dal posizionamento automatico). La forma abbreviata grid-row imposta entrambi contemporaneamente — ad esempio, grid-row: 1 / 3 posiziona l'elemento dalla linea di riga 1 alla linea di riga 3, coprendo due righe.

Valore iniziale	auto
Si applica a	Elementi della griglia.
Ereditata	No.
Animabile	Sì.
Versione	CSS Grid Layout Module Level 1
Sintassi DOM	`object.style.gridRowEnd = "4";`

Sintassi

grid-row-end: auto | <integer> | span <integer> | inherit | initial | unset;

Esempio: valore numero di linea

Il valore predefinito auto fa occupare all'elemento una singola riga. Impostare grid-row-end: 3 su un elemento che inizia alla linea 1 (predefinita) lo fa estendere sulle prime due righe — il bordo inferiore dell'elemento cade sulla linea 3.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: 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-end: 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-end 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>
  </body>
</html>

Provalo tu stesso »

Risultato

![CSS grid-row-end con più elementi](/uploads/media/default/0001/04/260b91923438edb01b18d93650fd3050e244dd52.png "CSS grid-row-end example" =420x)

L'elemento 1 termina alla linea di griglia 3, quindi si estende sulle prime due righe mentre gli elementi rimanenti scorrono attorno ad esso. Nell'esempio successivo, lo stesso effetto viene ottenuto con la parola chiave span invece di un numero di linea fisso.

Esempio: valore span

Usare span è utile quando si vuole specificare quante righe copre un elemento piuttosto che la linea esatta su cui termina. grid-row-end: span 3 significa che l'elemento si estende per tre righe verso il basso a partire dal suo punto di inizio.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: 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-end: span 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-end property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div class="box">2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Con grid-row-end: span 3, l'elemento 2 mantiene la sua linea di inizio automatica e si estende per tre righe verso il basso, indipendentemente da quale linea assoluta raggiunga.

Valori

Valore	Descrizione
`auto`	L'elemento occupa una singola riga (posizionamento automatico). Questo è il valore predefinito.
`span n`	L'elemento termina `n` righe dopo la sua linea di inizio.
`<integer>`	Un numero di linea di riga positivo o negativo dove l'elemento deve terminare. Gli interi negativi contano dalla fine della griglia (`-1` = ultima linea).
`initial`	Imposta la proprietà al suo valore predefinito (`auto`).
`inherit`	Eredita il valore dall'elemento padre.
`unset`	Rimuove il valore corrente, ripristinando quello ereditato o iniziale.

Errori comuni

span è relativo; i numeri di linea sono assoluti. grid-row-end: 3 si ferma sempre alla linea 3; grid-row-end: span 3 si ferma tre righe dopo la linea di inizio. Confonderli è il bug di posizionamento nella griglia più comune.
Fine prima dell'inizio? Il browser li scambia. Se grid-row-end si risolve in una linea prima di grid-row-start, il browser scambia automaticamente i due valori in modo che l'area rimanga valida.
Impostare solo grid-row-end non sposta l'inizio. La linea di inizio viene comunque posizionata automaticamente. Per fissare entrambi i bordi, usare la forma abbreviata grid-row (grid-row: 1 / 3) oppure impostare anche grid-row-start.
I valori negativi raggiungono solo la griglia esplicita. -1 punta all'ultima linea della griglia definita da grid-template-rows; non si estende alle righe create implicitamente.
width/height espliciti di solito non sono necessari. Il layout a griglia dimensiona automaticamente gli elementi all'interno delle celle assegnate.

Proprietà correlate

grid-row-start — la linea da cui l'elemento inizia sull'asse di riga.
grid-row — forma abbreviata che imposta sia la linea di inizio che quella di fine di riga contemporaneamente.
grid-column-end — la controparte di questa proprietà per l'asse di colonna.
grid-template-rows — definisce le tracce di riga e le linee tra di esse.
grid-area — imposta tutte e quattro le linee di posizionamento (row-start, column-start, row-end, column-end) in un'unica dichiarazione.
grid-auto-rows — controlla la dimensione delle tracce di riga create implicitamente quando gli elementi superano la griglia esplicita.

Esercizio

Pratica

Cosa fa la proprietà CSS 'grid-row-end'?

Definisce la linea in cui il lato finale di un elemento della griglia termina orizzontalmente.Definisce la linea in cui il lato finale di un elemento della griglia termina verticalmente.Allinea gli elementi all'interno della griglia verticalmente.Controlla lo spazio tra due righe nella griglia.