Come funziona il GAP in CSS Grid e flexbox

by Janeth Kent Date: 22-07-2022 css

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:



layout grid con gap
 

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.



layout grid con gap
 

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:



layout grid con gap
 

Il column-gap si applica sempre tra le tracce delle colonne, quindi sostituendo gap con column-gap si ottiene il seguente risultato:



layout grid con gap
 

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;
}




layout grid con gap
 

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



layout grid con gap
 

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.



layout grid con gap
 

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;  
}




layout grid con gap
 

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.


 
 
by Janeth Kent Date: 22-07-2022 css visite : 1907  
 
Janeth Kent

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.

 
 
 

Articoli correlati

Nuove unità grafiche della finestra - CSS

'Intercop 2022" è un progetto annunciato da Google, Microsoft, Apple e Mozzilla Foundation per far sì che tutti i browser offrano la stessa esperienza web. Il progetto ha 15 aree di…

Introduzione alle CSS Container Queries

Il responsive web design è una componente essenziale dello sviluppo web. Come sviluppatori front-end, dobbiamo preoccuparci continuamente della moltitudine di nuove risoluzioni e dispositivi. Va da se che creare una versione…

Flexbox, breve guida pratica

In questo articolo impareremo a gestire gli elementi del nostro sito web in modo più efficiente ed efficace, grazie alla proprietà Flexbox. Ma attenzione, non stiamo parlando di una semplice proprietà…

Paesaggi Parallax costruiti interamente con CSS e HTML

Il CSS3 ha messo finalmente fine alle nostre frustrazioni: con delle semplici proprietà si aprono infatti infinite soluzioni. Una tra tante, la possibilità di inserire uno sfondo animato in una pagina…

9 Utili Librerie CSS per il Disegno Web

I componenti perduti di bootstrap, un complemento che sicuramente non dovrete mai farvi mancare!  Jasny Bootstrap E se il vostro framework CSS parlasse? Ecco a voi un nuovo Framework Semantico.Un…

Introduzione all'animazione dei poligoni con css

Per lungo tempo noi sviluppatori web, abbiamo dovuto rassegnarci alle strutture geometriche fondamentali: i blocchi rettangolari. Cosí, quando è stato introdoto il clipping nei css, abbiamo gioito. Dite la verità... Ma cos'è…

CSS: la funzione Calc()

Nella progettazione di un sito web responsive, dobbiamo tener conto della ormai grande varietà di dispositivi sui quali sarà visualizzato il nostro lavoro e delle rispettive variazioni di risoluzioni alle…

Realizzare banner animati con CSS3

Avete dei clienti esigenti che "ancora" vi chiedono movimentati, sbrilluccicanti banner in flash? Se siete stanchi di rispondere che ormai il flash è andato in pensione potete proporre una soluzione…

I 10 migliori generatori di gradienti CSS

Difficilmente si potrà creare il gradiente perfetto affidandoci alla pura e semplice scrittura di codice CSS. Avere un riferimento visivo in fase di creazione è fondamentale. Ecco perché tra i tool…

15 effetti di testo avanzati con CSS3

Le nuove proprietà CSS3 sono senza dubbio un grande vantaggio per poter modellare a piacimento tutti gli elementi di una pagina web senza dover ricorrere all'utilizzo del codice javascript. Una delle…

15 esempi di trasformazioni 3D con CSS

Lo sviluppo e l'evoluzione dei browser web come Safari, Chrome e Firefox ha dato agli sviluppatori web ed ai web designers, l'opportunitá di sbizzarrirsi con  la creazione di effetti bellissimi,…

8 strumenti per formattare ed ottimizzare i CSS

La fase di ottimizzazione dei file CSS è forse una delle piú importanti per velocizzare il caricamento di un sito web o blog. Per raggiungere questo obiettivo è necessario ripulire il…

Clicky