Proprietà CSS grid-template-rows

La proprietà grid-template-rows definisce quante righe ha una CSS grid e quanto è alta ciascuna di esse. Si elencano le dimensioni delle tracce una dopo l'altra, separate da spazi, e il CSS crea una riga esplicita per ogni valore. Quindi grid-template-rows: 100px 200px crea due righe: la prima alta 100 px, la seconda alta 200 px.

Questa proprietà influisce solo sui grid container (elementi con display: grid o display: inline-grid). È la controparte nella direzione delle righe di grid-template-columns, e le due vengono spesso scritte insieme per definire l'intera griglia.

La dimensione di una traccia può essere una lunghezza fissa, una percentuale, un'unità flessibile fr, una parola chiave basata sul contenuto, o una funzione come repeat() e minmax(). Combinarle è ciò che rende i layout a griglia flessibili:

Usa una lunghezza (px, rem) quando vuoi che una riga mantenga un'altezza esatta.
Usa fr quando vuoi che le righe condividano lo spazio rimanente proporzionalmente.
Usa auto o min-content / max-content quando la riga deve crescere per adattarsi al contenuto.
Usa repeat() per evitare di digitare la stessa dimensione più volte.
Usa minmax() quando una riga necessita di un valore minimo e uno massimo (ad esempio, "almeno 100px, ma cresci se necessario").

Informazione

Le righe che crei qui sono la griglia esplicita. Se gli elementi traboccano in righe non definite, quelle righe aggiuntive vengono dimensionate da grid-auto-rows.

Valore iniziale	none
Si applica a	Grid container.
Ereditato	No.
Animabile	Sì. La dimensione delle righe è animabile.
Versione	CSS Grid Layout Module Level 1
Sintassi DOM	`object.style.gridTemplateRows = "20px 100px"`

Sintassi

grid-template-rows: none
                  | auto
                  | max-content
                  | min-content
                  | <length>
                  | <percentage>
                  | <flex>           /* e.g. 1fr */
                  | fit-content(<length-percentage>)
                  | repeat(<count>, <track-list>)
                  | minmax(<min>, <max>)
                  | subgrid
                  | [line-name] <track-size> [line-name];

Le parole chiave standard initial e inherit si applicano anche, come per ogni proprietà CSS.

Uso di base

Righe dimensionate automaticamente

Con auto, ogni riga cresce per adattarsi alla cella più alta. Questo è il punto di partenza più comune.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .auto-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: auto auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
        margin-top: 30px;
      }
      .auto-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>grid-template-rows: auto auto</h2>
    <div class="auto-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Con grid-template-rows: auto auto, entrambe le righe crescono per adattarsi al loro contenuto, quindi ogni cella ha la stessa altezza del fratello più alto in quella riga.

Righe a altezza fissa

Passa valori in pixel per bloccare le righe a un'altezza esatta indipendentemente dal contenuto.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: 100px 300px;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>grid-template-rows: 100px 300px</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

Provalo tu stesso »

Qui le righe sono fisse: la prima è sempre alta 100 px e la seconda sempre 300 px, indipendentemente da quanto contenuto contengano le celle. Il contenuto che supera queste altezze viene ritagliato o scorre a seconda dell'impostazione overflow.

Unità fr, repeat() e minmax()

L'unità fr

fr ("frazione") rappresenta una quota dello spazio libero rimasto nella griglia dopo che le tracce a dimensione fissa sono state posizionate. Lo spazio libero è la dimensione totale della griglia meno lo spazio occupato dalle tracce con dimensioni assolute o basate sul contenuto.

/* Three equal rows */
grid-template-rows: 1fr 1fr 1fr;

/* Header takes half, body takes the other half */
grid-template-rows: 1fr 1fr;

/* Header is fixed, body gets all remaining space */
grid-template-rows: 80px 1fr;

L'unità fr è utile quando la griglia ha un'altezza nota (impostata sul container) e si vuole che le tracce la riempiano senza fare calcoli.

repeat()

repeat(count, track-list) è un'abbreviazione per ripetere una o più dimensioni di tracce.

/* Same as: 1fr 1fr 1fr 1fr */
grid-template-rows: repeat(4, 1fr);

/* Alternating: 80px 1fr 80px 1fr */
grid-template-rows: repeat(2, 80px 1fr);

minmax()

minmax(min, max) assegna a una traccia una dimensione minima e una massima. Il browser risolve la dimensione effettiva in quell'intervallo in base al contenuto e allo spazio disponibile.

/* Row is at least 80px; grows with content up to 200px */
grid-template-rows: minmax(80px, 200px);

/* Row is at least 80px; grows to fill remaining space */
grid-template-rows: minmax(80px, 1fr);

Combinare tutte e tre

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-grid {
        display: grid;
        height: 600px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(2, 1fr) minmax(80px, auto);
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .flex-grid > div {
        background-color: #eee;
        text-align: center;
        padding: 10px;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <h2>fr, repeat() and minmax()</h2>
    <div class="flex-grid">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

La griglia è alta 600 px. repeat(2, 1fr) crea due righe che occupano ciascuna una quota uguale dell'altezza disponibile. La terza riga usa minmax(80px, auto): è alta almeno 80 px, ma si espande se il suo contenuto diventa più alto.

Tracce con linee con nome

Puoi assegnare un nome alle linee tra le righe racchiudendo il nome tra parentesi quadre. Le linee con nome rendono molto più semplice il posizionamento degli elementi con grid-row senza dover contare le linee della griglia.

.layout {
  display: grid;
  grid-template-rows:
    [header-start] 80px [header-end body-start]
    1fr
    [body-end footer-start] 60px [footer-end];
}

/* Place an item from body-start to body-end */
.main {
  grid-row: body-start / body-end;
}

Una linea può avere più nomi separati da spazi all'interno delle stesse parentesi — [header-end body-start] significa che la stessa linea è la fine dell'intestazione e l'inizio del corpo.

Parole chiave basate sul contenuto

auto

auto significa che la traccia è dimensionata in base al suo contenuto (equivalente a minmax(auto, auto)). La riga cresce fino all'elemento più alto che contiene, ma non si riduce al di sotto della dimensione minima del contenuto. Quando nella stessa dichiarazione sono presenti anche tracce fr, le tracce auto vengono risolte per prime e le tracce fr condividono lo spazio rimanente.

min-content

La riga è esattamente abbastanza alta da contenere il contenuto più piccolo in qualsiasi cella — in pratica, alta quanto la parola più lunga o l'immagine più piccola.

max-content

La riga è abbastanza alta da contenere il contenuto più grande senza andare a capo. Equivale a dare a ogni cella tutto lo spazio verticale di cui ha bisogno.

fit-content(`<value>`)

fit-content(200px) si comporta come auto (cresce con il contenuto) ma si limita all'argomento fornito. Equivalente a min(max-content, max(auto, 200px)). Utile quando si vuole che una riga sia dimensionata in base al contenuto ma non cresca oltre un certo limite.

subgrid

Quando un elemento della griglia è a sua volta un grid container, subgrid su grid-template-rows indica a quella griglia interna di usare le tracce di riga della griglia padre invece di crearne di proprie. Ciò consente di allineare il contenuto all'interno degli elementi della griglia nidificata con il ritmo della griglia esterna.

.parent {
  display: grid;
  grid-template-rows: 80px 1fr 60px;
}

.child {
  display: grid;
  /* This child spans 3 rows of the parent */
  grid-row: 1 / 4;
  /* Adopt those same 3 row tracks */
  grid-template-rows: subgrid;
}

subgrid è ampiamente supportato dalla fine del 2023 (Chrome 117+, Firefox 71+, Safari 16+).

auto-fill e auto-fit in repeat()

auto-fill e auto-fit vengono usati all'interno di repeat() per creare quante tracce possono stare nel container. Si vedono più comunemente con grid-template-columns, ma funzionano in modo identico con le righe quando il container ha un'altezza fissa.

/* As many rows of at least 100px as will fit */
grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));

auto-fill — riempie la griglia con quante più tracce possibile, anche se alcune sono vuote.
auto-fit — uguale a auto-fill, ma riduce le tracce vuote a zero così che gli elementi si estendano per riempire lo spazio disponibile.

Valori

Valore	Descrizione
`none`	Predefinito. Nessuna riga esplicita è definita; tutte le righe sono implicite.
`auto`	L'altezza della riga è determinata dal suo contenuto o dallo spazio disponibile.
`max-content`	La riga è alta quanto la dimensione intrinseca più grande tra i suoi elementi.
`min-content`	La riga è alta quanto la dimensione intrinseca più piccola tra i suoi elementi.
`minmax(min, max)`	La dimensione della traccia è nell'intervallo dato. `min` non può essere `fr`; `max` può esserlo.
`<length>`	Un'altezza fissa come `100px` o `2rem`.
`<percentage>`	Un'altezza relativa all'altezza del grid container (deve essere definita).
`<flex>` (`fr`)	Una dimensione non negativa che prende una quota dello spazio libero rimanente.
`fit-content(<value>)`	Dimensionata sul contenuto ma limitata all'argomento fornito.
`repeat(count, tracks)`	Ripete un pattern di dimensioni di tracce. `count` può essere un numero, `auto-fill` o `auto-fit`.
`subgrid`	La lista di tracce è ereditata dalla griglia padre.
`initial`	Reimposta la proprietà al suo valore predefinito (`none`).
`inherit`	Eredita il valore dall'elemento padre.

Errori comuni

fr richiede un'altezza definita del container. Se il grid container non ha un height esplicito, non c'è spazio libero che le righe fr possano condividere — si riducono al dimensionamento auto. Imposta sempre un height (o min-height) sul container quando usi fr nelle righe.
Le percentuali richiedono un'altezza definita del container per lo stesso motivo. Se l'altezza del container è intrinseca, anche le dimensioni percentuali delle righe si risolvono in auto.
Solo righe esplicite. Questa proprietà dimensiona le righe che dichiari. Le righe extra generate dagli elementi in eccesso vengono dimensionate da grid-auto-rows — quelle righe implicite assumono auto per impostazione predefinita se grid-auto-rows non è impostato.
minmax(0, 1fr) vs 1fr. L'unità fr ha un minimo implicito di auto, quindi le righe 1fr non possono ridursi al di sotto della dimensione del loro contenuto. Usa minmax(0, 1fr) quando vuoi esplicitamente che le righe si riducano al di sotto del contenuto — ad esempio, all'interno di container con scorrimento.

Pratica

Cosa fa la proprietà grid-template-rows in CSS?

Definisce il numero di righe in un layout a griglia.Specifica la dimensione/le dimensioni delle righe in un layout a griglia.Crea il layout a griglia in CSS.Controlla la quantità di spazio tra ogni riga in un layout a griglia.Definisce l'ordine dei livelli in un layout a griglia.

Proprietà correlate

grid-template-columns — la controparte nella direzione delle colonne di questa proprietà.
grid-auto-rows — dimensiona le righe create implicitamente, al di fuori della griglia esplicita.
grid-template-areas — assegna nomi alle aree della griglia per posizionare gli elementi per riferimento.
grid-template — abbreviazione per righe, colonne e aree in un'unica dichiarazione.
grid-row — abbreviazione per posizionare o estendere un elemento della griglia attraverso le tracce di riga.
grid-auto-flow — controlla la direzione e l'algoritmo di impacchettamento per gli elementi posizionati automaticamente.
grid — l'abbreviazione completa della griglia e punto di partenza per il layout a griglia.