Grid-Template-Rows in CSS

La proprietà grid-template-rows in CSS è una delle principali proprietà del modulo CSS Grid Layout, che ti permette di definire l’altezza e la disposizione delle righe all’interno di un container grid. Utilizzando grid-template-rows, puoi specificare il numero di righe e le loro dimensioni, creando layout flessibili e responsivi. In questa guida, esploreremo come utilizzare grid-template-rows, con esempi pratici e best practices per ottimizzare i tuoi layout web.

1. Cos’è grid-template-rows?

La proprietà grid-template-rows definisce il numero di righe e l’altezza di ciascuna riga in un container grid. Come con grid-template-columns, puoi utilizzare diverse unità di misura per specificare l’altezza delle righe, come pixel, percentuali, frazioni (fr), auto, o minmax().

1.1. Sintassi di Base

.container {
  display: grid;
  grid-template-rows: value1 value2 value3 ...;
}

• value1, value2, value3...: Definiscono l’altezza di ciascuna riga. Puoi usare unità come px, %, fr, auto, o minmax().

2. Esempi di Utilizzo di grid-template-rows

2.1. Righe di Altezza Fissa

Puoi specificare l’altezza delle righe in pixel o altre unità fisse.

Esempio:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: grid;
  grid-template-rows: 100px 200px 100px;
}

.item {
  background-color: #4caf50;
  padding: 10px;
  color: white;
  text-align: center;
}

In questo esempio, la griglia avrà tre righe: la prima e la terza alte 100px, e la seconda alta 200px.

2.2. Righe di Altezza Automatica

Utilizzando auto, puoi far sì che le righe si dimensionino automaticamente in base al contenuto.

Esempio:

.container {
  display: grid;
  grid-template-rows: auto auto auto;
}

In questo esempio, ogni riga si adatterà all’altezza del suo contenuto, creando un layout flessibile.

2.3. Righe Frazionali (fr)

L’unità fr rappresenta una frazione dello spazio disponibile all’interno della griglia, ideale per creare layout fluidi.

Esempio:

.container {
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;
}

In questo esempio, la seconda riga occuperà due volte lo spazio delle altre due righe, che condivideranno equamente lo spazio rimanente.

2.4. Righe con minmax()

La funzione minmax() consente di specificare un’altezza minima e massima per una riga.

Esempio:

.container {
  display: grid;
  grid-template-rows: minmax(100px, 1fr) 200px minmax(50px, auto);
}

In questo esempio, la prima riga avrà un’altezza minima di 100px e si espanderà fino a 1fr, la seconda riga sarà fissa a 200px, e la terza riga avrà un’altezza minima di 50px e si espanderà automaticamente.

2.5. Uso di repeat() per Righe Ripetute

Puoi usare la funzione repeat() per creare righe con la stessa altezza in modo più efficiente.

Esempio:

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
}

In questo esempio, vengono create tre righe, ciascuna con un’altezza di 100px.

3. Best Practices per l’Uso di grid-template-rows

3.1. Usare fr per Layout Fluidi

L’unità fr è particolarmente utile per creare righe che si adattano dinamicamente allo spazio disponibile, rendendo il layout flessibile e reattivo.

3.2. Combinare con grid-template-columns

Per un controllo completo della griglia, combina grid-template-rows con grid-template-columns per definire sia le righe che le colonne.

Esempio:

.container {
  display: grid;
  grid-template-rows: 1fr 2fr;
  grid-template-columns: 1fr 1fr;
}

In questo esempio, la griglia è suddivisa in due righe e due colonne, con la seconda riga che occupa più spazio verticale rispetto alla prima.

3.3. Usare auto per Righe Contenitore

Se non conosci l’altezza del contenuto, utilizza auto per permettere alle righe di adattarsi automaticamente alla quantità di contenuto che contengono.

3.4. Gestire il Layout Responsivo

Combina minmax() e media query per creare layout che si adattano a diverse dimensioni dello schermo.

Esempio:

@media (max-width: 600px) {
  .container {
    grid-template-rows: auto;
  }
}

3.5. Testare su Diversi Dispositivi

Assicurati che i tuoi layout funzionino correttamente su diversi dispositivi e risoluzioni. Verifica che le righe siano ben proporzionate e che il layout rimanga utilizzabile e visivamente gradevole.

4. Conclusione

La proprietà grid-template-rows in CSS è fondamentale per controllare l’altezza e la disposizione delle righe in un layout Grid. Comprendere come utilizzare questa proprietà insieme ad altre funzioni di CSS Grid ti permette di creare layout avanzati, flessibili e responsivi, ottimizzati per diverse dimensioni dello schermo. Seguendo le best practices e sperimentando con le varie opzioni, puoi costruire griglie che migliorano l’esperienza utente e si adattano perfettamente ai tuoi progetti web.