Sommario:
Link veloci
Punti chiave
- Gap CSS è una proprietà versatile che definisce la spaziatura tra gli elementi.
- gap è una proprietà di scelta rapida che può assumere due valori per definire gli spazi tra righe e colonne.
- gap può essere utilizzato con i layout Flexbox, Griglia e Multi-colonna.
I CSS offrono molti modi per disporre gli elementi sulle tue pagine web, dal posizionamento assoluto al design basato su griglia. La spaziatura attorno e tra gli elementi è altrettanto importante e, ancora una volta, ci sono molte opzioni. La proprietà gap è un modo utile e versatile per introdurre lo spazio bianco e funziona con diversi schemi di layout.
Cos’è il divario?
Gap CSS è una proprietà di stile semplice ma essenziale che aiuta a definire la spaziatura dei layout di progettazione. Dare spazio ai propri elementi è una delle regole d’oro della composizione da applicare per una grafica gradevole ed efficace.
Puoi utilizzare questa proprietà per specificare la dimensione degli spazi tra gli elementi in tre formati di layout:
Tutti i browser moderni supportano la proprietà gap che integra le proprietà del modello box come margine e riempimento.
Come scrivere la proprietà gap CSS
La sintassi di base per la proprietà gap è:
gap: <row-gap> <column-gap>;
Ogni valore può assumere una lunghezza o una percentuale e il gap di colonna è facoltativo; senza di esso, un singolo valore verrebbe applicato sia alle righe che alle colonne. COSÌ:
gap: 10em;
…significa che sia le righe che le colonne avranno uno spazio pari a 10 volte la dimensione del carattere corrente, mentre:
gap: 20px 10%;
…produrrà uno spazio tra le righe di 20 pixel e uno spazio tra le colonne pari a un decimo della larghezza dell’elemento contenitore.
Dovresti utilizzare gap con gli elementi del contenitore che definiscono il layout, anziché con gli elementi all’interno del contenitore. La proprietà mira a creare uno spazio uniforme tra gli elementi anziché una spaziatura più complessa e variabile.
Utilizzo dello spazio con Flexbox
Puoi utilizzare Gap per controllare lo spazio tra le righe e le colonne creato da un layout flessibile. La direzione flessibile utilizzata dal layout determinerà se si applica lo spazio tra righe o colonne.
Per impostazione predefinita, nella direzione normale della riga, gli elementi all’interno di un contenitore flessibile verranno visualizzati uno accanto all’altro. Quindi questo semplice CSS:
.flex-layout {
display: flex;
}.flex-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
Produce questo layout:
Tieni presente che ogni elemento all’interno del contenitore utilizza le classiche proprietà del modello box per la spaziatura: riempimento e margine. Aggiunta di qualche lacuna:
.flex-layout { gap: 20px; }
Aumenterà lo spazio tra gli elementi flessibili, ma non attorno ad essi:
Se il tuo layout flessibile visualizza gli elementi sia su colonne che su righe, ad esempio disponendoli a capo:
.flex-layout {
gap: 20px 40px;
flex-wrap: wrap;
}
Vedrai l’effetto di entrambi gli spazi vuoti:
Tieni sempre presente che altre proprietà, come margine e giustifica-contenuto, possono influenzare lo spazio tra gli elementi. Considera lo spazio come un valore minimo a meno che non controlli esplicitamente tutte le altre proprietà che possono influenzare la spaziatura.
Utilizzo dello spazio con la griglia
Puoi anche utilizzare Gap con un layout a griglia. La differenza principale è che di solito vorrai specificare sia gli spazi di riga che quelli di colonna poiché Grid è più adatto ai layout bidimensionali.
Come in un layout Flex, per impostazione predefinita Grid visualizzerà gli elementi uno accanto all’altro, sebbene sia possibile controllare la spaziatura attorno a ciascun elemento utilizzando il riempimento e il margine:
.grid-layout {
display: grid;
grid-template-columns: 100px 80px 100px;
}.grid-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
Il risultato è un tipico layout a griglia:
Aggiunta di uno spazio vuoto:
.grid-layout {
gap: 80px 40px;
}
Verrà inserito uno spazio tra ciascun elemento:
Nota come qui si applicano i singoli valori per lo spazio tra righe e colonne, creando uno spazio tra le righe che è il doppio della dimensione (80 px) dello spazio tra le colonne (40 px). Ricorda che, se utilizzi un singolo valore, definirai lo stesso spazio tra righe e colonne.
Utilizzo dello spazio vuoto con layout a più colonne
È possibile utilizzare la proprietà gap anche con layout di colonna, ma in questo caso è rilevante solo un singolo valore; non ci sono righe. I layout a più colonne hanno uno spazio predefinito:
.column-layout {
column-count: 3;
}
Ma è molto piccolo, con una dimensione di 1 em:
Ciò è particolarmente evidente quando si varia il carattere e, soprattutto, se si giustifica il testo:
.column-layout {
font-size: 14pt;
line-height: 1.4;
text-align: justify;
}
Le righe di testo risultanti si incontrano e diventano scomode da leggere:
Specificando uno spazio, puoi aumentare lo spazio tra le colonne, dando loro più spazio per respirare.
.column-layout {
gap: 2em;
}
Potresti scoprire che 2em o anche 3em danno un risultato più leggibile, a seconda di altri fattori come la larghezza delle colonne:
Ricorda che puoi utilizzare un’utilità del browser come Dev Tools di Google Chrome per controllare i tuoi layout e vedere come proprietà come gap e margine influiscono sui tuoi layout.
Quando si utilizzano due valori per il gap, verificare di averli nel verso giusto. L’ordine “riga, colonna” può non essere intuitivo, ma corrisponde all’ordine di altre proprietà di scelta rapida come il riempimento e il margine.
Il modo esatto in cui utilizzerai Gap varierà a seconda dello schema di layout a cui lo stai applicando. In generale, tuttavia, dovresti cercare uno spazio vuoto quando hai bisogno di spazio regolare tra gli oggetti, ma non attorno ad essi.