La creazione delle colonne in CSS3

aldolat@gmail.com (Aldo Latino) — Fri, 24 Jul 2009 07:36:45 +0000

Una delle funzioni di CSS3 che può affascinare chi ama impaginare libri è la facilissima possibilità di impostare il testo in colonne. Ieri, dando uno sguardo a questo articolo, ho pensato di prenderne spunto e scriverne brevemente soprattutto per chi ancora non avesse visto in azione questa funzione.

Non tutte le caratteristiche della gestione delle colonne sono ancora implementate. Firefox 3.5 non comprende ancora lo spanning di un titolo su tutte le colonne.

Di seguito alcuni esempi, con il relativo stile utilizzato.

Tre colonne

Il browser crea 3 colonne con spazio di 20 pixel e le distribuisce nello spazio a disposizione. Se avete installato Gridfox, un plugin per Firefox, vedrete come i valori si adattano perfettamente alla griglia di impaginazione usata nel tema di questo blog (12 colonne con spazio intercolonna di 20 pixel su una giustezza pagina di 940 pixel).

Questo lo stile:

.style {
    -moz-column-count: 3; /* conteggio colonne */
    -moz-column-gap: 20px; /* spazio intercolonna */
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

Ed ecco come appare:

Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Colonne di 220 pixel

In questo caso creeremo due colonne, ma anziché dirne il numero, specificheremo la larghezza di ogni colonna e il relativo spazio. Il browser farà il resto.

.style {
    -moz-column-width: 220px; /* larghezza della colonna */
    -moz-column-gap: 20px;
    -webkit-column-width: 220px;
    -webkit-column-gap: 20px;
    column-width: 220px;
    column-gap: 20px;
}

3 colonne con riga divisoria

Stesso esempio del primo, ma con la riga intercolonna.

.style {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -moz-column-rule: 1px solid #ccc; /* riga di divisione delle colonne */
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    -webkit-column-rule: 1px solid #ccc;
    column-count: 3;
    column-gap: 20px;
    column-rule: 1px solid #ccc;
}

Altezza + larghezza della colonna singola

Se la nostra esigenza è di occupare prima di tutto lo spazio in verticale, possiamo specificare l’altezza come al solito e poi la larghezza di ogni colonna. Il browser onorerà, appunto, prima il valore di altezza.

.style {
    -moz-column-width: 140px;
    -moz-column-gap: 20px;
    -webkit-column-width: 140px;
    -webkit-column-gap: 20px;
    column-width: 140px;
    column-gap: 20px;
    height: 760px; /* Altezza blocco colonne */
}

Altezza + numero di colonne

Come nell’esempio precedente ci interessa occupare lo spazio in altezza, ma questa volta specificheremo quante colonne vogliamo.

.style {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
    height: 820px;
}