Il template {{Colonne}} serve per dividere il contenuto della pagina in colonne autoadattanti. Le colonne si distribuiscono in orizzontale finché hanno spazio a disposizione, poi scendono in verticale man mano che la finestra o lo schermo si restringe. A differenza del template {{Div col}}, si specifica manualmente il contenuto di ogni colonna affinché sia al suo interno indivisibile.

{{Colonne}}
Questo testo appare nella prima colonna.
{{Colonne spezza}}
Questo testo appare nella seconda colonna.
{{Colonne spezza}}
Questo testo appare nella terza colonna.
{{Colonne fine}}

Risultato

Si può avere qualsiasi numero di colonne. Ogni colonna cerca di disporsi orizzontalmente in base allo spazio disponibile, e ha un piccolo stacco di 20 pixel sulla destra per prevenire il contatto con il testo della colonna successiva. Se non c'è abbastanza spazio orizzontale, le colonne sfilano man mano in verticale con un'andata a capo.

Attenzione: quando lo schermo è troppo piccolo, il template rinuncia automaticamente a distribuire le colonne in orizzontale per evitare di accalcare il testo.

Ci sono due parametri opzionali, valorizzabili con o senza nome.

• Primo parametro o "width": larghezza totale dell'insieme delle colonne. Può essere un valore assoluto (in centimetri, pollici, pixel, em, ecc., ad esempio 12cm) o relativo (in percentuale) rispetto alla larghezza della pagina (ad esempio 50%).
• Secondo parametro o "css": stili HTML aggiuntivi (ad esempio background-color:...).

Per creare una sezione multi-colonna in una pagina (in questo esempio, una lista di nomi propri) in cui lo spazio disponibile è del 100%, inserire le seguenti righe:

{{Colonne}}
*Andrea
*Antonio
*Bruno
*Carlo
{{Colonne spezza}}
*Francesco
*Giuseppe
*Marco
*Paola
{{Colonne spezza}}
*Roberto
*Sabrina
*Salvatore
*Silvia
{{Colonne fine}}

Risultato

Per creare una sezione multi-colonna in una pagina in cui lo spazio disponibile è solo del 50%, inserire le seguenti righe:

{{Colonne|50%}}
Questo testo appare nella prima colonna.
{{Colonne spezza}}
Questo testo appare nella seconda colonna.
{{Colonne spezza}}
Questo testo appare nella terza colonna.
{{Colonne fine}}

Risultato

Il testo delle colonne è allineato di default a sinistra. Per modificarne l'allineamento, compilare il parametro css con text-align impostato su center oppure su right, così:

{{Colonne|css=text-align:right}}
Questo testo appare nella prima colonna.
{{Colonne spezza}}
Questo testo appare nella seconda colonna.
{{Colonne spezza}}
Questo testo appare nella terza colonna.
{{Colonne fine}}

Risultato

Per spezzare su più colonne un elenco numerato mantenendo intatta la numerazione si deve ricorrere a un piccolo espediente: nelle colonne successive alla prima bisogna "forzare" il primo valore (<li value=X>) e poi usare il tag HTML <li> al posto di #. Ovviamente si ha l'aggiornamento automatico della numerazione con l'inserimento di nuovi elementi nell'elenco.

{{Colonne}}
# A
# B
# C
# D
{{Colonne spezza}}
<ol>
<li value=5> E </li>
<li> F </li>
<li> G </li>
<li> H </li>
</ol>
{{Colonne spezza}}
<ol>
<li value=9> I </li>
<li> L </li>
<li> M </li>
<li> N </li>
</ol>
{{Colonne fine}}

Risultato

• Template:Colonne spezza
• Template:Colonne fine
• Template:Div col
• Template:Div col end