Proprietà CSS column-count
La proprietà CSS column-count specifica il numero di colonne in cui suddividere un elemento. Scopri i valori e prova gli esempi.
La proprietà column-count specifica il numero di colonne in cui verrà suddiviso il contenuto di un elemento. Fa parte del modulo CSS di layout a più colonne, che consente a un singolo blocco di contenuto di fluire automaticamente su più colonne — come in un giornale o in una rivista — senza dover dividere manualmente il markup.
Questa pagina illustra cosa fa column-count, la sua sintassi e i valori accettati, esempi eseguibili, come funziona insieme alle altre proprietà delle colonne e le insidie da tenere a mente.
Cosa fa column-count
column-count accetta un numero intero positivo o la parola chiave auto. auto è il valore predefinito.
- Quando impostata su un valore numerico (ad esempio
3), il browser cerca di suddividere il contenuto esattamente in quel numero di colonne di uguale larghezza. - Quando impostata su
auto, il numero di colonne è determinato da altre proprietà — in particolarecolumn-width. Se non viene impostato nécolumn-countnécolumn-width, il contenuto viene visualizzato come una singola colonna.
Se si impostano entrambe column-count e column-width, column-count funge da massimo: il browser dispone quante più colonne di almeno column-width riesce, ma mai più di column-count. Questa combinazione è il pattern responsivo consigliato, e la proprietà abbreviata columns imposta entrambe contemporaneamente.
Quando usarla?
Il layout a più colonne è ideale per lunghi passaggi di testo continuo in ordine di lettura — articoli, pagine con termini e condizioni, elenchi di link — dove si desidera che il contenuto riempia la larghezza disponibile in colonne bilanciate. Non è adatto come griglia generica: per layout di pagina bidimensionali usa invece CSS Grid o Flexbox.
| Valore iniziale | auto |
|---|---|
| Si applica a | Contenitori blocco ad eccezione dei box wrapper delle tabelle. |
| Ereditato | No. |
| Animabile | Sì. Il numero di colonne è animabile. |
| Versione | CSS3 |
| Sintassi DOM | object.style.columnCount = "4"; |
Sintassi
Sintassi della proprietà column-count
column-count: <integer> | auto | initial | inherit;Esempio della proprietà column-count:
Esempio della proprietà CSS column-count con valore auto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: auto;
}
</style>
</head>
<body>
<h2>Column-count 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
Esempio della proprietà column-count con un valore numerico:
Esempio della proprietà CSS column-count con un valore numerico
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 7;
}
</style>
</head>
<body>
<h2>Column-count 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. It is a great fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
</body>
</html>Con column-count: 7, il browser suddivide lo stesso paragrafo in sette colonne. Se il contenitore è troppo stretto per dare a ciascuna colonna una larghezza utilizzabile, le colonne diventano molto sottili — ed è esattamente per questo che combinare column-count con column-width (o la proprietà abbreviata columns) è generalmente una scelta migliore rispetto a un numero fisso.
Utilizzo con le altre proprietà delle colonne
column-count raramente viene usata da sola. Queste proprietà complementari definiscono la forma delle colonne risultanti:
| Proprietà | Cosa controlla |
|---|---|
column-width | La larghezza ideale di ciascuna colonna. Combinata con column-count, limita il numero di colonne a un massimo. |
column-gap | Lo spazio tra le colonne. |
column-rule | Una linea tracciata tra le colonne (come un border, ma nello spazio tra esse). |
columns | Abbreviazione per impostare column-width e column-count insieme. |
column-span | Permette a un elemento (come un'intestazione) di estendersi su tutte le colonne. |
column-fill | Determina se il contenuto viene distribuito uniformemente tra le colonne o riempie ciascuna colonna in sequenza. |
Una ricetta comune e robusta consiste nell'impostare contemporaneamente una larghezza target e un numero massimo di colonne:
.article {
column-width: 14rem; /* aim for ~14rem-wide columns */
column-count: 3; /* but never more than 3 */
column-gap: 2rem;
}Insidie
- Solo numeri interi.
column-countnon accetta frazioni o unità —2.5e200pxnon sono validi. Usacolumn-widthquando vuoi ragionare in termini di larghezza. - È un massimo, non una garanzia. Quando è impostata anche
column-width, il browser potrebbe visualizzare un numero di colonne inferiore acolumn-countse non c'è spazio sufficiente. - Il contenuto può essere tagliato tra le colonne. Usa la proprietà
break-inside(break-inside: avoid) per evitare che elementi come figure o voci di elenco vengano spezzati tra i confini delle colonne. - Animabile ma raramente animato. Il valore può essere oggetto di transizione, ma il riflusso del testo in un numero diverso di colonne è visivamente fastidioso, quindi viene raramente usato nelle animazioni.
La proprietà
column-countè supportata da tutti i browser moderni. Internet Explorer 10–11 e le versioni precedenti di Safari richiedevano i prefissi-ms-/-webkit-; oggi la proprietà senza prefisso è sicura da usare.
Valori
| Valore | Descrizione | Prova |
|---|---|---|
| auto | Il numero di colonne è determinato da altre proprietà. Questo è il valore predefinito della proprietà. | Prova » |
<integer> | Specifica il numero esatto di colonne in cui far fluire il contenuto. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dal suo elemento padre. |