Forse conoscete già la proprietà CSS gap. Non è esattamente una novità, ma l'anno scorso ha acquisito un'importante capacità: ora funziona in Flexbox oltre che in CSS Grid. Questo, e il fatto che la proprietà sia più complicata di quanto sembri, mi ha fatto venire voglia di tornare a spiegare esattamente come funziona.
Diamo un'occhiata approfondita a gap e alle sue proprietà per capire come e dove funzionano.
Tutte le proprietà di gap
Per iniziare, esaminiamo tutte le proprietà CSS relative al gap. Ce ne sono sei in totale:
grid-row-gap
grid-column-gap
grid-gap
row-gap
column-gap
gap
Da questo elenco, possiamo già ignorare le prime tre proprietà. Le proprietà grid-* sono state aggiunte all'inizio della stesura delle specifiche di CSS Grid e successivamente deprecate. I browser supportano ancora queste proprietà deprecate di grid-* (al momento in cui scriviamo) e le trattano semplicemente come se il prefisso grid- non fosse presente. Quindi, grid-gap è equivalente a gap, grid-column-gap è equivalente a column-gap e grid-row-gap è equivalente a row-gap.
Per quanto riguarda le altre tre proprietà, sapendo che gap è un'abbreviazione che consente di specificare le altre due proprietà, abbiamo bisogno di sapere cosa fanno row-gap e column-gap.
La comprensione di queste proprietà dipende dal tipo di layout CSS che stiamo utilizzando.
Esaminiamo prima queste opzioni.
Dove si possono usare i gaps?
Grid gaps
Tutti i browser supportano i gaps nel grid e sono abbastanza semplici da capire.
row-gap introduce uno spazio tra le file
column-gap introduce uno spazio tra le colonne
Proviamo a creare una griglia con tre colonne e due file:
.container {
display: grid;
grid-template-columns: 200px 100px 300px;
grid-template-rows: 100px 100px;
}
Il codice produrrá un layout di questo tipo:
Le linee rosse della griglia separano le tracce (file e colonne) della griglia. Queste linee non esistono realmente nella griglia: sono invisibili, non hanno spessore e sono tipicamente ciò che visualizzereste nel DevTools (in Safari, Firefox, Edge o Chrome).
Se però iniziamo ad aggiungere degli spazi alla nostra griglia, è come se queste linee iniziassero ad acquisire spessore.
Aggiungiamo allora uno spazio di 20px:
.container {
display: grid;
grid-template-columns: 200px 100px 300px;
grid-template-rows: 100px 100px;
gap: 20px;
}
Le linee tra i nostri tracciati sono ora spesse 20px e quindi allontanano gli elementi della griglia.
Vale la pena notare che le tracce hanno ancora le stesse dimensioni (definite dalle proprietà grid-template-*); pertanto, la griglia è più larga e più alta di quanto non fosse senza spazi vuoti.
Nella griglia, il row-gap si applica sempre tra le tracce delle file. Quindi, se sostituiamo gap con row-gap nell'esempio precedente, otteniamo questo:
Il column-gap si applica sempre tra le tracce delle colonne, quindi sostituendo gap con column-gap si ottiene il seguente risultato:
Il grid è semplice perché, per impostazione predefinita, le colonne sono verticali e le file orizzontali, proprio come in una tabella. È quindi facile ricordare dove si applicano gli spazi tra le colonne e tra le file.
Ora, le cose si complicano un po' quando si usa la modalità di scrittura. La modalità di scrittura predefinita sul Web è orizzontale, da sinistra a destra, ma esistono anche modalità di scrittura verticali e quando ciò accade, le colonne diventano orizzontali e le file verticali. Prestate sempre attenzione alla modalità di scrittura, perché può rendere il tutto meno intuitivo.
Questa è una buona premessa per la prossima sezione, in cui le colonne e le file assumono un nuovo significato con il Flexbox.
Gap in Flexbox
Parliamo degli spazi vuoti nei layout Flexbox, dove le cose si complicano un po'. Utilizzeremo il seguente esempio:
.container {display: flex;}
Per impostazione predefinita, si ottiene un contenitore flessibile suddiviso in linee, il che significa che gli elementi all'interno del contenitore sono impilati da sinistra a destra sulla stessa linea orizzontale.
In questo caso, lo spazio tra le colonne viene applicato tra gli elementi e lo spazio tra le linee non fa nulla. Questo perché c'è solo una riga (o fila).
Ma proviamo ad aggiungere uno spazio tra gli elementi:
.container {
display: flex;
column-gap: 10px;
}
Ora cambiamo la direzione el flex del nostro contenitore impostandolo su colonna, che impila gli elementi verticalmente, dall'alto verso il basso, con il seguente codice:
.container {
display: flex;
flex-direction: column;
column-gap: 10px;
}
Come potete notate, lo spazi tra gli elementi è scomparso. Anche se column-gap aggiungeva spazio tra gli elementi quando il contenitore era in corrispondenza di una fila, non funziona più in corrispondenza delle colonne.
Per ripristinarlo è necessario utilizzare row-gap. In alternativa, si potrebbe usare lo shorthand gap con un valore, che applicherebbe lo stesso gap in entrambe le direzioni e, quindi, funzionerebbe in entrambi i casi.
.container {
display: flex;
flex-direction: column;
gap: 10px;
}
Quindi per riassumere, il colum-gap funziona sempre in verticale (assumendo la modalità di scrittura predefinita) e il row-gap funziona sempre in orizzontale. Non dipende dalla direzione del contenitore flex.
Ma ora diamo un'occhiata a un esempio in cui è coinvolto il line wrapping:
.container {
display: flex;
flex-wrap: wrap;
column-gap: 40px;
row-gap: 10px;
justify-content: center;
}
In questo caso, consentiamo agli elementi di andare a capo su più file con flex-wrap: wrap se non c'è abbastanza spazio per inserire tutto in una sola fila
Qui, lo spazio tra le colonne è ancora applicato verticalmente tra gli elementi e lo spazio tra le file è applicato orizzontalmente tra le due linee di flessione.
C'è una differenza interessante rispetto al grid: gli spazi tra le colonne non sono necessariamente allineati tra le linee in flex. Ciò è dovuto a justify-content: center, che centra gli elementi all'interno delle linee.
Spazi vuotio o gap multicolonna
La multicolonna è un tipo di layout che consente di far fluire automaticamente il contenuto su diverse colonne, come avviene in un articolo di giornale tradizionale. Si imposta un numero di colonne e si stabilisce la dimensione di ciascuna di esse.
Gli spazi vuoti nei layout a più colonne non funzionano come nel o in Flexbox. Ci sono tre differenze notevoli:
- il gap tra le righe non ha effetto
- il gap tra le colonne ha un valore predefinito diverso da 0
- si puó creare uno stile ai gap
Analizziamo queste differenze dettagliatamente Innanzitutto, lo spazio tra le righe non ha effetto. Nei layout a più colonne, non ci sono righe da separare. Ciò significa che solo il column-gap è rilevante (così come il gap shorthand).
In secondo luogo, a differenza di Grid e Flexbox, il column-gap ha un valore predefinito di 1em nei layout a più colonne (anziché 0). Quindi, anche quando non viene specificato alcuno spazio, le colonne di contenuto sono fisicamente separate. Il gap predefinito può essere ovviamente modificato, ma è comunque un buon valore predefinito.
Vediamo il codice dell'esempio:
.container {
column-count: 3;
padding: 1em;
}
Infine, è possibile definire lo spazio vuoto tra le colonne in un layout a più colonne. Utilizziamo la proprietà column-rule, che funziona come border:
.container {
column-count: 3;
column-gap: 12px;
column-rule: 4px solid red;
padding: 12px;
}
supporto del gap per i browser
Gap è davvero ben supportato. Potete trovare ulteriori informazioni su caniuse, ma per riassumere: Flexbox: gap è supportato ovunque, tranne che per Internet Explorer (non che ce ne interessi molto..;-) ), Opera Mini e UC Browser per Android. caniuse ha un supporto globale dell'87,31%. Grid: stessa cosa, ma il supporto globale è del 93,79%. Multi-colonna: Stessa cosa, ma non è supportata in Safari e ha un supporto globale del 75,59%. Nel complesso, quindi, la proprietà gap è ben supportata e, nella maggior parte dei casi.