CSS gap
La proprietà CSS3 gap definisce lo spazio tra gli elementi in Flex e Grid
La proprietà gap
è utilizzata nei layout flex
e grid
per controllare lo spazio interno tra le righe e le colonne. È più leggibile e manutenibile rispetto all'uso dei margin
sui singoli elementi.
Sintassi
Significato dei valori principali:
valore singolo (es.
20px
): applica la stessa distanza tra righe e colonne.due valori (es.
10px 30px
): il primo valore è lo spazio tra righe, il secondo lo spazio tra colonne.
Esempio proprietà: gap
Codice Esempio: gap

.gap-example {
display: grid;
grid-template-columns: repeat(3, 100px);
gap: 15px 30px; /* Riga, Colonna */
background-color: #eee;
padding: 20px;
}
.gap-item {
background-color: #50a14f;
color: white;
text-align: center;
padding: 20px;
border-radius: 5px;
font-size: 16px;
}
Contenuto Esempio: gap
Esempio di utilizzo di gap
In questo esempio, la proprietà gap
crea spazio tra gli elementi di un contenitore grid
:
CSS e HTML per l'esempio con gap
:
<style>
.gap-example {
display: grid;
grid-template-columns: repeat(2, 100px);
gap: 15px 30px; /* 15px tra le righe, 30px tra le colonne */
background-color: #eee;
padding: 20px;
}
.gap-item {
background-color: #50a14f;
color: white;
text-align: center;
padding: 20px;
border-radius: 5px;
font-size: 16px;
}
</style>
<div class="gap-example">
<div class="gap-item">1</div>
<div class="gap-item">2</div>
<div class="gap-item">3</div>
<div class="gap-item">4</div>
<div class="gap-item">5</div>
<div class="gap-item">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.