CSS grid-template-rows
La proprietà CSS3 grid-template-rows definisce l'altezza delle righe nella griglia
Con grid-template-rows puoi specificare quante righe deve avere una griglia e l'altezza di ciascuna. È possibile usare unità fisse come px, relative come % o flessibili come fr, nonché funzioni avanzate come repeat() o minmax() per creare layout adattabili e responsivi.
Sintassi
Significato dei valori principali:
-
px, %, em: definiscono altezze fisse o relative delle righe. Es:
100px,20%,5em. -
fr: unità flessibile che rappresenta una frazione dello spazio verticale disponibile. Es:
1fr 2fr. -
repeat(n, val): crea n righe con lo stesso valore. Es:
repeat(3, 100px). -
minmax(min, max): imposta un valore minimo e massimo per l'altezza di una riga. Es:
minmax(50px, 200px).
Esempio proprietà: grid-template-rows
Codice Esempio: grid-template-rows
.grid-rows-example {
display: grid;
grid-template-rows: 80px 1fr minmax(50px, 150px);
grid-template-columns: 1fr;
height: 400px;
gap: 10px;
border: 2px solid #999;
padding: 10px;
}.grid-rows-example > div {
background-color: #986801;
color: white;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
}
Contenuto Esempio: grid-template-rows
Esempio di utilizzo di grid-template-rows
In questo esempio, la proprietà grid-template-rows definisce l'altezza delle righe: una fissa, una flessibile e una con minmax.
80px
1fr
minmax(50px, 150px)
CSS e HTML per la griglia con grid-template-rows:
<style>
.grid-rows-example {
display: grid;
grid-template-rows: 80px 1fr minmax(50px, 150px);
grid-template-columns: 1fr;
height: 400px;
gap: 10px;
}
.grid-rows-example > div {
background-color: #986801;
color: white;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div class="grid-rows-example">
<div>Riga 1<br><small>80px</small></div>
<div>Riga 2<br><small>1fr</small></div>
<div>Riga 3<br><small>minmax(50px, 150px)</small></div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.214
