Proprietà CSS column-gap
La proprietà column-gap imposta la distanza tra le colonne. Scopri i valori disponibili e prova esempi pratici.
La proprietà CSS column-gap imposta la dimensione dello spazio (il gutter) tra colonne adiacenti. Funziona in tre diversi contesti di layout: layout multi-colonna creati con column-count, contenitori flex e contenitori grid. In Flexbox e CSS Grid è la metà orizzontale della scorciatoia gap, e sostituisce la vecchia proprietà grid-column-gap.
Questa pagina illustra la sintassi della proprietà, i valori accettati, il comportamento in ciascun contesto di layout e le particolarità legate alle percentuali e alla column-rule.
column-gap è una delle proprietà CSS3.
Cosa fa
In un layout multi-colonna il browser distribuisce il contenuto in un certo numero di colonne. Per impostazione predefinita, le colonne sono separate da un gap normal (1em per gli elementi multi-colonna). column-gap consente di sostituire questo valore predefinito con qualsiasi valore di lunghezza, così da restringere o allargare il gutter in base al proprio design.
Accetta una parola chiave normal oppure un valore <length>:
normal— il valore predefinito. Per i layout multi-colonna si risolve a1em. Per i contenitori flex e grid si risolve a0.<length>— un gutter fisso come30px,2emo1rem. I valori negativi non sono consentiti.<percentage>— un gap relativo alla larghezza dell'elemento.
La proprietà supporta anche le parole chiave standard initial e inherit.
I prefissi vendor (-moz-column-gap, -webkit-column-gap) non sono più necessari per i browser moderni. Il supporto nativo è disponibile in tutti i principali browser.
Dove si posiziona la column-rule
Quando una column-rule viene disegnata tra le colonne, si posiziona al centro del gap e non occupa spazio proprio. Se si allarga column-gap, la linea rimane centrata con più spazio su ciascun lato; se il gap è troppo piccolo, una linea spessa può visivamente affollare il testo.
column-gap vs. gap e grid-column-gap
Nei contenitori flex e grid, column-gap è la metà orizzontale della scorciatoia gap: gap: <row-gap> <column-gap>. La vecchia proprietà grid-column-gap svolge lo stesso compito in grid ma è deprecata — è preferibile usare column-gap.
| Valore iniziale | normal |
|---|---|
| Si applica a | Elementi multi-colonna, contenitori flex, contenitori grid. |
| Ereditata | No. |
| Animabile | Sì. La lunghezza del gap tra colonne è animabile. |
| Versione | CSS3 |
| Sintassi DOM | object.style.columnGap = "100px"; |
Sintassi
Sintassi della proprietà CSS column-gap
column-gap: length | normal | initial | inherit;Esempio della proprietà column-gap:
Esempio della proprietà CSS column-gap con valore normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
column-gap: normal;
}
</style>
</head>
<body>
<h2>The column-gap property example</h2>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Risultato
Con column-gap: normal, le quattro colonne sono separate dal gutter predefinito di 1em.
Esempio della proprietà column-gap con il valore "length":
Qui impostiamo un gutter esplicito di 30px, dando alle colonne una separazione maggiore rispetto al valore predefinito normal.
Esempio della proprietà CSS column-gap con valore length
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
column-gap: 30px;
}
</style>
</head>
<body>
<h2>Column-gap property example</h2>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Utilizzo di column-gap in flex e grid
La stessa proprietà controlla il gutter orizzontale tra gli elementi flex e tra le colonne della griglia. In questi contesti viene solitamente scritta tramite la scorciatoia gap, ma column-gap da solo è pienamente supportato:
/* Flex container: 24px between items in a row */
.flex {
display: flex;
column-gap: 24px;
}
/* Grid: 16px between columns, 8px between rows */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 16px;
row-gap: 8px;
}Si noti che in flex e grid il valore predefinito di column-gap è 0, mentre in un layout multi-colonna il valore predefinito normal corrisponde a 1em.
Valori percentuali
Un gap espresso in percentuale viene calcolato rispetto alla larghezza dell'elemento, non alla larghezza della colonna:
div {
column-count: 3;
column-gap: 5%; /* 5% of the element's width */
}Poiché le percentuali dipendono dalla larghezza del contenitore, il gutter cresce e si riduce al ridimensionamento del layout — utile per i design fluidi, ma più difficile da prevedere rispetto a un valore fisso in px.
Valori
| Valore | Descrizione |
|---|---|
| normal | La dimensione predefinita del gap tra le colonne. |
| length | Specifica la lunghezza che imposta il gap tra le colonne. Può essere espressa in em, px o percentuali. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |
Proprietà correlate
- column-count — imposta il numero di colonne in cui il contenuto viene suddiviso.
- column-width — suggerisce una larghezza ideale per ciascuna colonna.
- columns — scorciatoia per
column-widthecolumn-count. - column-rule — disegna una linea nel gap tra le colonne.
- grid-gap — la scorciatoia
gapper impostare insieme i gap di riga e di colonna nella griglia.