La leggibilità di un testo in una pagina web dipende da più fattori tra i quali i più rilevanti sono il tipo e la dimensione del font usato e la lunghezza delle righe.

Su alcuni manuali, il numero di caratteri massimo che consente una lettura agevole è pari a 75; questo valore non deve essere interpretato in maniera stringente ma costituisce un valido riferimento.

Aprendo la pagina con gli esempi creati su questo argomento, possiamo vedere innanzitutto l’Esempio 1 nel quale un contenitore avente larghezza 100% contiene testo che risulta difficilissimo da leggere a causa della lunghezza eccessiva della riga.

Utilizzando le proprietà: column-count, column-width e column-gap è possibile suddividere su più colonne il testo in un div.

L’Esempio 2 mostra lo stesso contenitore al quale è stata applicata la proprietà column-count impostando il relativo valore a 3.
Naturalmente, tramite apposite media query sarà possibile modificare tale valore portando il testo su 2 colonne e poi su 1 sola colonna al ridursi della viewport.

Le colonne sono separate da una distanza standard ma è possibile cambiarla utilizzando la proprietà column-gap.
Nell’Esempio 3 è dunque stato impostato tale valore a 2vw dove 1vw = 1% della larghezza della viewport.
Nessuno ci impedisce di usare altre unità di misura anche di tipo assoluto (tipicamente: px) ma impostarne una di tipo relativo permette di ottenere una gradevole proporzionalità rispetto alla dimensione della viewport oppure rispetto a quella del font (usando em oppure rem, essendo quest’ultima l’unità di misura relativa alla dimensione del font dell’elemento root).
[N.B.: per consultare un riepilogo delle unità di misura assolute e relative per il web, vedere in questa pagina: https://www.w3schools.com/cssref/css_units.asp]

L’Esempio 4 differisce dai precedenti perché non impostiamo il numero di colonne, bensì la loro larghezza tramite la proprietà column-width.
Una volta impostato il relativo valore, nel nostro caso 400px, il testo viene suddiviso in più colonne aventi la larghezza minima di 400px; se non è disponibilw almeno quello spazio nella viewport, i contenuti vengono posizionati su 1 sola colonna.

L’ultimo esempio di questa trattazione, chiamato Esempio 5, prevede 3 colonne con un gap impostato ed una linea verticale che separa le colonne.
Quest’ultima viene gestita tramite le proprietà column-rule-width, column-rule-style e column-rule-color.
Per comodità, ecco la regola CSS completa:


.contenitore5 {
width: 100%;
padding: 10px 20px;
column-count: 3;
column-gap: 2vw;
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: #999;
}