Per molti anni, i float CSS sono stati un componente pignolo, ma necessario, nella creazione di layout di siti web. Se il tuo progetto ha richiesto più colonne, hai scelto i float. Il problema con questo metodo è che, nonostante l'incredibile ingegnosità che i web designer / sviluppatori hanno dimostrato nella creazione di layout di siti complessi, i float CSS non sono mai stati pensati per essere utilizzati in questo modo.
Mentre i float e il posizionamento CSS sono sicuri di avere un posto nel web design per molti anni a venire, le nuove tecniche di layout, tra cui CSS Grid e Flexbox, stanno dando ai web designer nuovi modi per creare i loro layout del sito. Un'altra nuova tecnica di layout che mostra molto potenziale è CSS Multiple Columns.
Le colonne CSS sono in circolazione da alcuni anni, ma la mancanza di supporto nei browser più vecchi (principalmente versioni precedenti di Internet Explorer) ha impedito a molti professionisti del Web di utilizzare questi stili nel loro lavoro di produzione.
Con la fine del supporto per le versioni precedenti di IE, alcuni web designer stanno ora sperimentando nuove opzioni di layout CSS, incluse le colonne CSS e scoprendo di avere un controllo molto maggiore con questi nuovi approcci rispetto a quelli con i float.
Le basi delle colonne CSS
Come suggerisce il nome, CSS Multiple Columns (noto anche come layout multi-column CSS3) consente di suddividere il contenuto in un numero di colonne impostato. Le proprietà CSS più elementari che useresti sono:
- column-count
- column-gap
Per il conteggio delle colonne, si specifica il numero di colonne che si desidera. Lo spazio tra le colonne sarebbe la grondaia o la spaziatura tra quelle colonne. Il browser prenderà questi valori e dividerà il contenuto in modo uniforme nel numero di colonne specificato.
Un esempio comune di più colonne CSS in pratica sarebbe quello di dividere un blocco di contenuto di testo in più colonne, in modo simile a ciò che vedresti in un articolo di giornale. Supponiamo che tu abbia il seguente markup HTML (nota che, per esempio, sto solo mettendo l'inizio di un paragrafo, mentre in pratica ci sarebbero probabilmente più paragrafi di contenuto in questo markup):
Se poi hai scritto questi stili CSS:
.content {-moz-column-count: 3; -webkit-column-count: 3; numero di colonne: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; }
Questa regola CSS dividerebbe la divisione "contenuto" in 3 colonne uguali con un intervallo di 30 pixel tra di loro. Se si desiderava due colonne anziché 3, si sarebbe semplicemente modificare tale valore e il browser avrebbe calcolato le nuove larghezze di quelle colonne per dividere il contenuto in modo uniforme. Si noti che prima usiamo le proprietà con prefisso del venditore, seguite dalle dichiarazioni non prefissate.
Per quanto facile sia, il suo uso in questo modo è discutibile per l'uso del sito web. Sì, puoi dividere un gruppo di contenuti in più colonne, ma questa potrebbe non essere la migliore esperienza di lettura per il Web, specialmente se l'altezza di queste colonne scende sotto la "piega" dello schermo.
I lettori dovrebbero quindi scorrere su e giù per leggere l'intero contenuto. Tuttavia, il principio delle colonne CSS è facile come si vede qui, e può essere usato per fare molto di più che dividere il contenuto di alcuni paragrafi - può, infatti, essere usato per il layout.
Layout con colonne CSS
Supponi di avere una pagina web con un'area di contenuto con 3 colonne di contenuti. Questo è un layout molto tipico del sito Web e per ottenere queste 3 colonne, normalmente si fanno fluttuare le divisioni. Con CSS multiple-columns, è molto più semplice.
Ecco alcuni esempi di codice HTML:
