CSS grid-auto-rows
La proprietà CSS3 grid-auto-rows definisce l'altezza delle righe implicite
La proprietà grid-auto-rows imposta l’altezza delle righe che vengono create automaticamente dalla griglia, quando il contenuto va oltre le righe definite in grid-template-rows. È utile per controllare il layout di elementi dinamici e si applica a partire da CSS3.
Sintassi
Significato dei valori principali:
length: Altezza fissa in unità come
px,em, ecc. (es.100px).percentage: Altezza in percentuale rispetto al contenitore (es.
20%).auto: L’altezza si adatta al contenuto dell’elemento.
min-content: L’altezza minima richiesta per contenere il contenuto.
max-content: L’altezza necessaria per mostrare tutto il contenuto senza interruzioni.
fit-content(valore): Limita l’altezza a un valore massimo, ma si adatta al contenuto (es.
fit-content(150px)).
Esempio proprietà: grid-auto-rows
Codice Esempio: grid-auto-rows
.grid-auto-rows-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 120px;
gap: 10px;
background-color: #f3f3f3;
padding: 10px;
}.row-item {
background-color: #986801;
color: white;
font-size: 18px;
padding: 20px;
text-align: center;
border-radius: 6px;
}
Contenuto Esempio: grid-auto-rows
Esempio di utilizzo di grid-auto-rows
In questo esempio, usiamo grid-auto-rows per assegnare un'altezza fissa alle righe implicite della griglia:
CSS e HTML per le righe implicite:
<style>
.grid-auto-rows-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 120px;
gap: 10px;
background-color: #fff;
padding: 10px;
}
.row-item {
background-color: #986801;
color: white;
font-size: 18px;
padding: 20px;
text-align: center;
border-radius: 6px;
}
</style>
<div class="grid-auto-rows-container">
<div class="row-item">Elemento 1</div>
<div class="row-item">Elemento 2</div>
<div class="row-item">Elemento 3</div>
<div class="row-item">Elemento 4</div>
<div class="row-item">Elemento 5</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.108
