Proprietà CSS columns
La proprietà CSS columns imposta la larghezza e il numero di colonne. Scopri i valori e prova gli esempi.
La proprietà CSS columns è una proprietà shorthand che distribuisce il contenuto di un singolo elemento in più colonne, come in un giornale. Imposta due proprietà longhand contemporaneamente:
column-count— il numero massimo di colonne.column-width— la larghezza minima che ogni colonna deve avere (è una larghezza suggerita, non fissa).
Invece di scrivere entrambe le righe:
.example {
column-width: 100px;
column-count: 3;
}ne scrivi una sola:
.example {
columns: 100px 3;
}I due valori possono apparire in qualsiasi ordine, poiché uno è una lunghezza e l'altro un numero intero, quindi il browser riesce a distinguerli. Puoi anche fornirne uno solo e lasciare che l'altro assuma il valore predefinito auto.
Perché usare columns?
Il layout a più colonne è ideale per lunghi blocchi di testo — articoli, definizioni, nuvole di tag — dove si vuole che l'occhio del lettore percorra righe più brevi. A differenza di Flexbox o CSS Grid, non si divide il markup in elementi separati; il browser distribuisce un unico blocco di contenuto tra le colonne e lo riformatta al ridimensionamento del contenitore.
Come interagiscono i due valori
I valori descrivono un obiettivo, e il browser sceglie la soluzione migliore:
column-widthviene trattata come un minimo. Il browser inserisce quante colonne di almeno quella larghezza riesce a contenere nel contenitore.column-countlimita quel numero. Il browser non crea mai più colonne di questo valore, anche se ne entrerebbero di più.
Quindi columns: 100px 3 significa: "crea colonne larghe almeno 100px, ma non più di 3." In un contenitore largo si ottengono 3 colonne; man mano che il contenitore si restringe, il numero scende a 2, poi a 1, mantenendo ogni colonna ≥ 100px. Questo rende il layout responsive senza media query.
Se la larghezza e il numero di colonne richiesti non possono coesistere nell'elemento, il browser privilegia la larghezza e riduce il numero di colonne per rispettarla.
La proprietà columns è una delle proprietà CSS3. Per distanziare e separare le colonne che produce, abbinala a column-gap e column-rule; per far estendere un'intestazione su tutte le colonne, usa column-span.
| Valore iniziale | auto auto |
|---|---|
| Si applica a | Contenitori a blocco eccetto le table wrapper box. |
| Ereditato | No. |
| Animabile | Sì. Solo column-width è animabile. |
| Versione | CSS3 |
| Sintassi DOM | object.style.columns = "100px 2"; |
Sintassi
Sintassi della proprietà CSS columns
columns: [ <'column-width'> || <'column-count'> ] | auto | initial | inherit;Esempio della proprietà columns:
Esempio della proprietà CSS columns con le proprietà column-width e column-count
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
columns: 100px 3;
}
</style>
</head>
<body>
<h2>Columns property example</h2>
<div class="example">
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
Nell'esempio successivo ogni colonna è larga almeno 50px e il numero di colonne è limitato a 5. Poiché le colonne sono strette, il browser può inserirle tutte e 5 in un contenitore largo — e un numero inferiore man mano che si restringe:
Esempio con larghezza minore e limite di colonne più alto
Esempio della proprietà CSS columns con column-width e column-count come valore
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
columns: 50px 5;
}
</style>
</head>
<body>
<h2>Columns property example</h2>
<div class="example">
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>Valori
| Valore | Descrizione |
|---|---|
auto | Sia column-width che column-count vengono impostati su auto. Questo è il valore predefinito. |
<length> | Imposta la larghezza minima delle colonne. |
<integer> | Imposta il numero massimo di colonne. |
initial | Imposta la proprietà al suo valore predefinito. |
inherit | Eredita la proprietà dall'elemento padre. |
Errori comuni
- È un suggerimento, non un comando.
column-widthè un minimo, quindi la larghezza effettiva è quasi sempre maggiore del valore specificato. Per fissare una larghezza esatta occorre controllare anche la dimensione del contenitore. - Le colonne vengono bilanciate, non riempite dall'alto. Per impostazione predefinita il browser cerca di rendere tutte le colonne approssimativamente della stessa altezza, anziché riempire la prima prima di passare alla successiva.
- Attenzione alle interruzioni. Parole lunghe o elementi non divisibili possono traboccare da una colonna stretta;
break-inside: avoidaiuta a mantenere integri elementi come le card. - Solo
column-widthè animabile. Il numero di colonne scatta tra valori interi, quindi le transizioni su di esso non sono fluide.