Come funziona il GAP in CSS Grid e flexbox

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.

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.