La proprietà gap in CSS è un'abbreviazione per row-gape column-gap, che specifica la dimensione dei margini interni, ovvero lo spazio tra righe e colonne all'interno di layout a griglia, flessibile e a più colonne.
/* Grid layout */ .container ( display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 2fr 1fr; gap: 30px 20px; ) /* Flex layout */ .container ( display: flex; gap: 10%; ) /* Multi-column layout */ .container ( column-count: 5; gap: 20px; )
Usa il cursore nella demo qui sotto per vedere la gapproprietà in azione:
Sintassi
gap accetta uno o due valori:
- Un singolo valore imposta entrambi
row-gapecolumn-gapper lo stesso valore. - Quando vengono utilizzati due valori, il primo imposta il
row-gape il secondo imposta ilcolumn-gap.
.container ( gap: 1rem; /* Is equivalent to: * row-gap: 1rem; * column-gap: 1rem */ gap: 10px 15%; /* Is equivalent to: * row-gap: 10px; * column-gap: 15%; */ )La specifica per il CSS Grid Layout Module ha definito lo spazio tra le tracce della griglia utilizzando la grid-gapproprietà. gapha lo scopo di sostituirlo in modo che le lacune possano essere definite in più metodi di layout CSS, come flexbox, ma grid-gapdeve ancora essere utilizzato nei casi in cui un browser potrebbe essere stato implementato grid-gapma deve ancora iniziare a supportare la nuova gapproprietà.
Valori
gap accetta i seguenti valori:
normal: (Impostazione predefinita) il browser specificherà un valore utilizzato di 1em per il layout a più colonne e 0px per tutti gli altri contesti di layout (ad esempio, griglia e flessibile).: Tutta la lunghezza CSS valido e non negativo, come ad esempiopx,em,reme%, tra gli altri.: La dimensione dello spazio come valore percentuale non negativo rispetto alla dimensione dell'elemento. (Vedi sotto per i dettagli.)initial: Applica l'impostazione predefinita della proprietà, ovveronormal.inherit: Adotta il valore del gap del genitore.unset: Rimuove la correntegapdall'elemento.
Percentuali nelle proprietà del gap
Quando la dimensione di un contenitore nella dimensione dello spazio è definita, gaprisolve le percentuali rispetto alle dimensioni della casella del contenuto del contenitore in qualsiasi tipo di layout.
In altre parole, quando il browser conosce la dimensione del contenitore, può calcolare il valore percentuale del file gap. Ad esempio, quando l'altezza del contenitore è 100px e gapè impostata su 10%, il browser sa che il 10% di 100px è 10px.
Ma quando il browser non conosce le dimensioni, si chiederà: "10% di cosa?" In questi casi, gapsi comporta in modo diverso in base al tipo di layout.
In un layout a griglia, le percentuali si risolvono contro zero per determinare i contributi della dimensione intrinseca, ma si risolvono contro la casella del contenuto dell'elemento quando si dispone il contenuto della casella, il che significa che inserirà spazio tra gli elementi ma lo spazio non influirà sulle dimensioni del contenitore.
In questa demo, l'altezza del container non è definita. Guarda cosa succede quando aumenti le gapdimensioni. Quindi imposta le gapunità pixel e riprova:
In un layout flessibile, le percentuali si risolvono contro lo zero in tutti i casi, il che significa che gli spazi non verranno applicati quando la dimensione del contenitore non è nota al browser:
Utilizzo della funzione calc () con gap
È possibile utilizzare la calc()funzione per specificare la dimensione del gapma, al momento della stesura di questo documento, non è supportato su Safari e iOS.
.flex-layout ( display: flex; gap: calc(5vh + 5px) calc(5vw + 5px); )
.grid-layout ( display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(5vmin + 5px); )Esempi
La gapproprietà è progettata per l'uso in layout a griglia, flessibile e multi-colonna. Diamo un'occhiata ad alcuni esempi.
Layout della griglia
Nella demo seguente, puoi vedere come gapviene utilizzato per specificare le proprietà row-gape column-gapsu un contenitore della griglia, definendo i margini tra le righe della griglia e le colonne della griglia, rispettivamente:
Layout flessibile
L'applicazione dello spazio all'asse principale di un contenitore flessibile indica la spaziatura tra gli elementi flessibili in una singola riga del layout flessibile.
Qui viene column-gaputilizzato in una direzione di riga:
Viene row-gaputilizzato in una direzione di colonna:
Applicando gapalla dell'asse trasversale di un contenitore flessibile indica spaziatura tra linee di flessione del layout flex.
Ecco row-gapin una riga direzione:
Ecco column-gapin una direzione di colonna:
Layout a più colonne
column-gapappare nei layout a più colonne per creare spazi tra i riquadri delle colonne, ma tieni presente che row-gapnon ha alcun effetto poiché stiamo lavorando solo in colonne. gappuò ancora essere utilizzato in questo contesto, ma column-gapverrà applicato solo il .
Come puoi vedere nella prossima demo, sebbene la gapproprietà abbia un valore di 2rem, separa gli elementi solo orizzontalmente anziché in entrambe le direzioni poiché stiamo lavorando in colonne:
Più si conosce…
Ci sono un paio di cose che vale la pena notare quando si lavora con la gapproprietà.
È un bel modo per evitare spazi indesiderati
Hai mai usato i margini per creare spaziatura tra gli elementi? Se non stiamo attenti, possiamo ritrovarci con una spaziatura extra prima e dopo il gruppo di elementi.
Risolvere questo di solito richiede l'aggiunta di margini negativi o il ricorso a pseudo-selettori per rimuovere il margine da elementi specifici. Ma la cosa bella dell'utilizzo gapin metodi di layout più moderni è che hai solo spazio tra gli elementi. Il cruft in più all'inizio e alla fine non è mai un problema!
Ma, ehi, se vuoi avere spazio intorno agli oggetti durante l'uso gap, metti paddingil contenitore in questo modo:
.container ( display: flex; gap: 1rem; padding: 1rem; )La dimensione della grondaia non è sempre uguale al valore del gap
La gapproprietà non è l'unica cosa che può mettere spazio tra gli elementi. Margini, imbottiture justify-contente align-contentpossono anche aumentare le dimensioni della grondaia e influenzare il gapvalore effettivo .
Nell'esempio seguente, stiamo impostando un 1em gapma, come puoi vedere, c'è molto più spazio tra gli elementi, causato dall'uso di allineamenti distribuiti, come justify-contente align-content:
Supporto del browser
Le query sulle funzionalità di solito sono un buon modo per verificare se un browser supporta una proprietà specifica, ma in questo caso, se controlli la gapproprietà in flexbox, potresti ottenere un falso positivo perché una query sulla funzionalità non distingue tra le modalità di layout. In altre parole, potrebbe essere supportato in un layout flessibile che si traduce in un risultato positivo, ma in realtà non è supportato se viene utilizzato in un layout a griglia.
Layout della griglia
| IE | Bordo | Firefox | Cromo | Safari | musica lirica |
|---|---|---|---|---|---|
| No | 16+ | 61+ | 66+ | 12+ | 53+ |
| iOS Safari | Opera Mobile | Browser Android | Chrome per Android | Firefox per Android |
|---|---|---|---|---|
| 12+ | No | 81+ | 84+ | 68+ |
Layout a griglia con valori calc ()
| IE | Bordo | Firefox | Cromo | Safari | musica lirica |
|---|---|---|---|---|---|
| No | 84+ | 79+ | 84+ | No | 69+ |
| iOS Safari | Opera Mobile | Browser Android | Chrome per Android | Firefox per Android |
|---|---|---|---|---|
| No | No | 81+ | 84+ | 68+ |
Layout a griglia con valore percentuale
| IE | Bordo | Firefox | Cromo | Safari | musica lirica |
|---|---|---|---|---|---|
| No | 84+ | 79+ | 84+ | No | 69+ |
| iOS Safari | Opera Mobile | Browser Android | Chrome per Android | Firefox per Android |
|---|---|---|---|---|
| No | No | 81+ | 84+ | 68+ |
Layout flessibile
La specifica per l'utilizzo gapcon flexbox è attualmente in stato di Working Draft.
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 84 | 63 | No | 84 | TP |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | No | No |
Layout a più colonne
| IE | Bordo | Firefox | Cromo | Safari | musica lirica |
|---|---|---|---|---|---|
| No | 84+ | 79+ | 84+ | No | 69+ |
| iOS Safari | Opera Mobile | Browser Android | Chrome per Android | Firefox per Android |
|---|---|---|---|---|
| No | No | 81+ | 84+ | 68+ |
Maggiori informazioni
- Modulo CSS Box Alignment Livello 3
- Chromium ottiene Flexbox gap (Ticket # 761904)
- Stato delle funzionalità CSS di WebKit
Relazionato
- Layout della griglia
- Layout Flexbox
- Layout a più colonne