Proprietà grid-template-rows
La proprietà grid-template-rows definisce
il numero e la larghezza delle righe che
un elemento occuperà nella griglia.
Nel valore della proprietà specifichiamo la larghezza delle righe
in qualsiasi unità di misura
per dimensioni.
La proprietà viene specificata nell'elemento genitore
e determina la larghezza delle righe degli elementi figli.
Quando si specificano valori in pixel nelle proprietà,
le dimensioni delle righe corrisponderanno esattamente ad essi.
Se usiamo la parola chiave auto, le righe
riempiranno tutto lo spazio disponibile. L'uso
dell'unità fr (frazione) significa
che tutto lo spazio sarà diviso
in parti uguali. Il vantaggio
di fr è la sua adattabilità a
diversi contenitori o risoluzioni dello schermo,
poiché fr divide semplicemente lo spazio nel numero indicato
di frazioni senza legarsi a una dimensione precisa in pixel.
Sintassi
selettore {
grid-template-rows: larghezza riga;
}
Esempio
Specifichiamo la larghezza delle righe per i nostri elementi nella griglia:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50px 100px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Assegniamo alla prima e alla terza riga una larghezza fissa in pixel, e lasciamo che la seconda riga riempia automaticamente lo spazio disponibile:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 100px auto 60px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Ora utilizziamo la proprietà
grid-template-rows
per fare in modo che la prima e la seconda
riga occupino una parte del contenitore,
e la terza riga - tre parti:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
I valori specificati in unità fr
possono essere frazionari. Modifichiamo
l'esempio precedente, specificando
per la seconda e la terza riga una larghezza
in numeri decimali:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Specifichiamo nella proprietà grid-template-rows
la funzione repeat(),
che indica al contenitore che tutte e tre
le righe devono avere la stessa larghezza:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Modifichiamo ora l'esempio precedente in modo che alle tre righe uguali si aggiunga una quarta, che occuperà due frazioni del contenitore:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Assegniamo alle prime due righe una larghezza di una frazione del contenitore, e alle ultime due righe - due frazioni:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Ora impostiamo la larghezza delle righe
combinando valori specificati tramite
la funzione repeat() e unità libere fr:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Inoltre, nella funzione repeat() si può specificare
il valore auto-fill, che riempirà
il nostro contenitore con righe identiche della larghezza desiderata:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, 50px);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
È molto comodo usare auto-fill
insieme alla funzione minmax,
che imposta un intervallo di larghezza per le righe
da un valore minimo a uno massimo.
Se la larghezza del contenitore non può contenere tutte
le righe, alcune di esse si sposteranno
in una nuova riga, mentre le righe nella riga
si distribuiranno uniformemente al suo interno. Modifichiamo
l'esempio precedente, specificando in esso la funzione minmax:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Specifichiamo ora la proprietà auto-fit,
la cui differenza da auto-fill consiste nel fatto
che adatta il numero di righe
alla larghezza disponibile del contenitore, espandendole o
comprimendole:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Oltre a fr si possono
usare valori in %, che definiscono anch'essi
quale parte del contenitore occuperà la riga.
In questo caso, verrà prima calcolata la dimensione
della riga in %, e lo spazio libero rimanente
verrà suddiviso in frazioni:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Utilizziamo insieme le proprietà
grid-template-columns e
grid-template-rows:
<div id="parent">
<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>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Utilizziamo le proprietà
grid-template-columns e
grid-template-rows
per creare una tabella di nove celle, disposte
in tre righe. Inoltre, la seconda e la terza riga avranno la stessa larghezza,
mentre ogni colonna avrà una larghezza diversa:
<div id="parent">
<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>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Esempio
Ora, nella tabella dell'esempio precedente, facciamo in modo che la riga superiore abbia una larghezza di due frazioni, e la prima colonna - di mezza frazione:
<div id="parent">
<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>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Vedi anche
-
la proprietà
grid-template-columns,
che definisce il numero e la larghezza delle colonne nella griglia -
la proprietà
grid-auto-rows,
che definisce il numero e la larghezza delle righe nella griglia implicita
