CSS row-gap
La proprietà CSS3 row-gap imposta lo spazio tra le righe in un layout a griglia
La proprietà row-gap è utilizzata per definire la distanza verticale tra le righe in un contenitore a griglia (display: grid) o in un contenitore flex multiriga. Valori comuni includono unità fisse come px, em, oppure percentuali relative al contenitore.
Sintassi
Significato dei valori principali:
-
lunghezza: Specifica lo spazio tra le righe in unità comepx,em,rem, ecc. Es.20px. -
percentuale: Calcolata rispetto alla larghezza del contenitore. Es.10%. -
normal: Imposta uno spazio predefinito, variabile in base al contesto del layout.
Esempio proprietà: row-gap
Codice Esempio: row-gap
.row-gap-example {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 20px;
column-gap: 15px;
background-color: #eee;
padding: 20px;
}.row-gap-example div {
background-color: #ff6347;
color: white;
padding: 20px;
text-align: center;
font-size: 18px;
border-radius: 6px;
}
Contenuto Esempio: row-gap
Esempio di utilizzo di row-gap
In questo esempio, row-gap definisce la distanza verticale tra le righe di una griglia:
CSS e HTML per l'esempio con row-gap:
<style>
.row-gap-example {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 50px; /* Spazio verticale tra le righe */
column-gap: 15px; /* (opzionale) Spazio tra le colonne */
background-color: #eee;
padding: 20px;
}
.row-gap-example div {
background-color: #ff6347;
color: white;
padding: 20px;
text-align: center;
font-size: 18px;
border-radius: 6px;
}
</style>
<div class="row-gap-example">
<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>
<div>Elemento 4</div>
<div>Elemento 5</div>
<div>Elemento 6</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
