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
gap: lunghezza | riga lunghezza colonna lunghezza;
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
CODE: CSS
.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:
1
2
3
4
5
6
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.
Supporto Browser
IP: 18.97.14.88
