Proprietà CSS column-width

La proprietà CSS column-width imposta la larghezza ideale di ciascuna colonna in un layout a più colonne. Invece di indicare al browser quante colonne creare, gli si dice quanto deve essere larga ciascuna colonna, e il browser calcola quante colonne rientrano nello spazio disponibile.

Questo è l'approccio opposto a column-count, dove si fissa il numero di colonne e si lascia variare la loro larghezza. column-width è ciò che rende il testo a più colonne responsivo per impostazione predefinita: man mano che il contenitore si allarga, compaiono più colonne; man mano che si restringe, le colonne scompaiono finché non rimane una sola colonna.

La proprietà column-width è una delle proprietà CSS3.

Come funziona column-width

Il valore è meglio inteso come una larghezza minima desiderata, non come un valore esatto. Il browser inserisce il maggior numero possibile di colonne di almeno quella larghezza, poi le allunga per riempire lo spazio rimanente.

Se il contenitore può contenere più colonne della larghezza specificata, si ottengono più colonne.
Se il contenitore è più stretto del valore specificato, si ottiene una singola colonna larga quanto il contenitore — la larghezza non va mai oltre i bordi del box.
Quando è impostato anche column-count, column-width diventa una larghezza massima: il browser utilizza il vincolo che produce il minor numero di colonne. La proprietà abbreviata per impostare entrambi contemporaneamente è columns.

Un modo approssimativo per prevedere il risultato: numero di colonne ≈ floor(larghezza contenitore / (column-width + column-gap)). Il valore predefinito di column-gap è 1em.

Quando usarla

Usa column-width quando vuoi lunghezze di riga leggibili che si adattano al viewport — ad esempio per distribuire un lungo articolo o un elenco di elementi brevi in colonne in stile giornalistico senza scrivere media query. Poiché il numero di colonne si regola automaticamente, la stessa regola funziona su un telefono (una colonna) e su un desktop ampio (tre o quattro colonne).

Informazione

I browser moderni supportano column-width senza prefissi vendor. Il valore predefinito auto significa che la larghezza della colonna è decisa da altre proprietà come column-count, oppure ricade su una singola colonna se nessun altro vincolo è presente.

Valore iniziale	auto
Si applica a	Contenitori a blocco, eccetto i box wrapper delle tabelle.
Ereditata	No.
Animabile	Sì.
Versione	CSS3
Sintassi DOM	object.style.columnWidth = "5px";

Sintassi

Sintassi della proprietà CSS column-width

column-width: auto | length | initial | inherit;

Esempio della proprietà column-width:

Esempio della proprietà CSS column-width con la proprietà length

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-width: 80px;
      }
    </style>
  </head>
  <body>
    <h1>Column-width property example</h1>
    <p>Here the width of the column is set to 80px.</p>
    <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>

Provalo tu stesso »

Risultato

![Proprietà CSS column-width](https://api.w3docs.com/uploads/media/default/0001/03/5dc2724355e1e0cd7af891102d3b3d2c9e042376.png "Proprietà CSS column-width" =420x)

Esempio della proprietà column-width con il valore "auto":

Con auto, il browser non impone una larghezza target. Combinato con column-count, lascia che la regola del conteggio determini il layout; da solo ricade su una singola colonna.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-width: auto;
      }
    </style>
  </head>
  <body>
    <h1>Column-width property example</h1>
    <p>Here the width of the column is set to auto.</p>
    <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>

Provalo tu stesso »

Colonne responsive senza media query

Poiché il browser ricava il numero di colonne dalla larghezza disponibile, una singola regola column-width produce un layout che si ridispone da solo. Qui aggiungiamo anche un column-gap e una column-rule per la separazione. Ridimensiona l'anteprima per osservare le colonne comparire e scomparire.

<!DOCTYPE html>
<html>
  <head>
    <title>Responsive columns</title>
    <style>
      .news {
        column-width: 14em;
        column-gap: 2em;
        column-rule: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div class="news">
      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.
    </div>
  </body>
</html>

Problemi comuni

È un obiettivo, non una garanzia. La larghezza effettiva delle colonne renderizzate raramente corrisponde esattamente al valore impostato — il browser allunga le colonne per riempire la riga. Usala per controllare approssimativamente quante colonne appaiono, non la loro larghezza in pixel esatta.
column-width e column-count interagiscono. Quando entrambe sono presenti, il browser tratta column-width come valore massimo e non supera mai column-count. Imposta solo una delle due, a meno che non si voglia intenzionalmente un limite su entrambi gli assi.
Il contenuto alto può spezzare le colonne in modo non uniforme. Usa column-fill per controllare come il contenuto viene distribuito tra le colonne.
Le percentuali non sono consentite. A differenza di molte proprietà di larghezza, column-width accetta solo una lunghezza (px, em, ch, ...) o auto — non %.

Valori

Valore	Descrizione	Prova
auto	La larghezza della colonna è specificata dal browser. Questo è il valore predefinito.
length	La larghezza delle colonne è specificata tramite una lunghezza.
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dal suo elemento padre.

Proprietà correlate

column-count — fissa il numero di colonne invece della loro larghezza.
columns — abbreviazione per column-width e column-count.
column-gap — spazio tra le colonne.
column-rule — una linea tracciata tra le colonne.
column-span — permette a un elemento di estendersi su tutte le colonne.

Esercitati

Pratica

Cosa fa la proprieta 'column-width' in CSS?

La proprietà 'column-width' specifica la larghezza della colonna in un layout a più colonne.La proprietà 'column-width' specifica il numero di colonne in un layout.La proprietà 'column-width' specifica la larghezza della finestra del browser.La proprietà 'column-width' può accettare valori in 'px', 'em', 'rem' o una percentuale.La proprietà 'column-width' specifica la larghezza preferita per le colonne.