Quando e come utilizzare il layout a più colonne CSS

In tutta l'eccitazione per CSS Grid Layout e Flexbox, un altro metodo di layout viene spesso trascurato. In questo articolo darò un'occhiata al layout a più colonne, spesso indicato come multicolo o talvolta "colonne CSS". Scoprirai per quali attività è adatto e alcune delle cose a cui prestare attenzione quando crei le colonne.

Cos'è il Multicol?

L'idea di base di multicol è che puoi prendere una porzione di contenuto e farla scorrere su più colonne, come in un giornale. Puoi farlo usando una delle due proprietà. La proprietà column-count specifica il numero di colonne in cui si desidera suddividere il contenuto. La proprietà column-width specifica la larghezza ideale, lasciando al browser il compito di capire quante colonne si adatteranno.

Non importa quali elementi si trovano all'interno del contenuto che trasformi in un contenitore multicol, tutto rimane nel flusso normale, ma suddiviso in colonne. Questo rende multicol diverso da altri metodi di layout che abbiamo oggi nei browser. Flexbox e Grid, ad esempio, prendono gli elementi figlio del contenitore e tali elementi partecipano quindi a un layout flessibile o griglia. Con multicol, hai ancora un flusso normale, tranne che all'interno di una colonna.

Nell'esempio seguente sto usando column-width , per visualizzare colonne di almeno 14em . Multicol assegna tutte le colonne di 14em che si adattano e quindi condivide lo spazio rimanente tra le colonne. Le colonne saranno almeno 14em , a meno che non possiamo visualizzare solo una colonna, nel qual caso potrebbe essere più piccola. Multicol è stata la prima volta che abbiamo visto questo tipo di comportamento nei CSS, con la creazione di colonne che erano essenzialmente reattive per impostazione predefinita. Non è necessario aggiungere Media Query e modificare il numero di colonne per vari punti di interruzione, invece specifichiamo una larghezza ottimale e il browser lo risolverà.

Colonne di stile

Le caselle di colonna create quando si utilizza una delle proprietà di colonna non possono essere selezionate come target. Non puoi affrontarli con JavaScript, né puoi modellare una singola casella per dargli un colore di sfondo o regolare il riempimento e i margini. Tutte le caselle delle colonne avranno le stesse dimensioni. L'unica cosa che puoi fare è aggiungere una regola tra le colonne, usando la proprietà column-rule, che agisce come un bordo. Puoi anche controllare lo spazio tra le colonne usando la proprietà column-gap , che ha un valore predefinito di 1em , tuttavia puoi cambiarlo in qualsiasi unità di lunghezza valida.

Questa è la funzionalità di base di multicol. Puoi prendere un pezzo di contenuto e dividerlo in colonne. Il contenuto riempirà le colonne a turno, creando colonne nella direzione in linea. Puoi controllare gli spazi tra le colonne e aggiungere una regola, con gli stessi valori possibili del bordo. Fin qui tutto bene, e tutto quanto sopra è molto ben supportato nei browser ed è stato per molto tempo, rendendo questa specifica molto sicura da usare in termini di compatibilità con le versioni precedenti.

Ci sono alcune altre cose che potresti voler considerare con le tue colonne e alcuni potenziali problemi di cui essere a conoscenza quando usi le colonne sul Web.

Colonne espanse

A volte potresti voler suddividere alcuni contenuti in colonne, ma poi fare in modo che un elemento si estenda attraverso le caselle delle colonne. L'applicazione della proprietà column-span a un discendente del contenitore multicol consente di ottenere questo risultato.

Nell'esempio seguente, ho fatto sì che un elemento <blockquote> si estendesse sulle mie colonne. Si noti che quando si esegue questa operazione, il contenuto si suddivide in una serie di riquadri sopra l'intervallo, quindi avvia una nuova serie di riquadri di colonna sotto. Il contenuto non salta attraverso l'elemento con spanning.

La proprietà column-span è attualmente in fase di implementazione in Firefox ed è dietro un flag di funzionalità.

Tieni presente che nella specifica corrente, i valori per column-span sono all o none . Non puoi coprire solo alcune delle colonne, ma puoi ottenere il tipo di layout che potresti vedere in un giornale combinando multicolo con altri metodi di layout. In questo prossimo esempio, ho un contenitore a griglia con due tracce di colonne. La traccia di sinistra è 2fr , la traccia di destra 1fr . L'articolo nella traccia di sinistra l'ho trasformato in un contenitore multicol con due tracce, ha anche un elemento di copertura.

Sulla destra, abbiamo una parte che va nella seconda traccia della colonna Grid. Giocando con i vari metodi di layout a nostra disposizione, possiamo capire esattamente quale metodo di layout si adatta al lavoro da svolgere: non aver paura di mescolare e abbinare!

Controllo delle interruzioni di contenuto

Se hai contenuti contenenti intestazioni, probabilmente vorrai evitare la situazione in cui un'intestazione finisce come l'ultima cosa in una colonna con il contenuto che va nella colonna successiva. Se disponi di immagini con didascalie, la situazione ideale sarebbe che l'immagine e la didascalia rimangano come un'unica unità, senza essere suddivise su colonne. Per affrontare questi problemi, i CSS hanno proprietà per controllare dove si interrompe il contenuto.

Quando dividi il tuo contenuto in colonne, esegui ciò che è noto come frammentazione. Lo stesso vale se dividi il contenuto tra le pagine, ad esempio quando crei un foglio di stile per un contesto di stampa. Pertanto, multicol è il più vicino a Paged Media che ad altri metodi di layout sul Web. Per questo motivo, per diversi anni il modo per controllare le interruzioni nel contenuto è stato quello di utilizzare le proprietà di interruzione di page-break- che facevano parte dei CSS2.1.

• page-break-before
• page-break-after
• page-break-inside

Più recentemente la specifica CSS Fragmentation ha definito proprietà per la frammentazione progettate per qualsiasi contesto frammentato, la specifica include dettagli per Paged Media, multicol e la specifica Regions in stallo; Regioni frammenta anche un contenuto continuo. Rendendo queste proprietà generiche possono essere applicate a qualsiasi futuro contesto frammentato, nello stesso modo in cui le proprietà di allineamento da Flexbox sono state spostate nelle specifiche di allineamento del riquadro in modo che potessero essere utilizzate nel layout Griglia e Blocco.

• break-before
• break-after
• break-inside

Ad esempio, ho usato break-inside avoid sull'elemento <figure> , per evitare che la didascalia si stacchi dall'immagine. Un browser di supporto dovrebbe tenere insieme la figura anche se ciò fa sì che le colonne sembrino sbilanciate.

Sfortunatamente, il supporto per queste proprietà in multicol è piuttosto irregolare. Anche se supportati, dovrebbero essere visti come un suggerimento a causa del fatto che sarebbe possibile fare così tante richieste mentre si tenta di controllare l'interruzione, che essenzialmente il browser non può davvero interrompersi da nessuna parte. La specifica definisce le priorità in questo caso, tuttavia è probabilmente più utile per te controllare solo i casi più importanti.

Il problema delle colonne sul web

Uno dei motivi per cui non vediamo molto utilizzato multicol sul web è il fatto che sarebbe molto facile ritrovarsi con un'esperienza di lettura che fa scorrere il lettore nella dimensione del blocco. Ciò significherebbe scorrere su e giù verticalmente per quelli di noi che usano l'inglese o un'altra modalità di scrittura verticale. Questa non è una buona esperienza di lettura!

Se fissi l'altezza del contenitore, ad esempio utilizzando l'unità viewport vh , e c'è troppo contenuto, l'overflow avverrà nella direzione inline e quindi otterrai invece una barra di scorrimento orizzontale.

Nessuna di queste cose è l'ideale e l'uso di multicol sul Web è qualcosa a cui dobbiamo pensare con molta attenzione in termini di quantità di contenuti che potremmo mirare a fluire nelle nostre colonne.

Blocca colonne di overflow

Per il livello 2 della specifica, stiamo considerando come abilitare un metodo mediante il quale le colonne di overflow, quelle che attualmente finiscono per causare la barra di scorrimento orizzontale, potrebbero invece essere create nella direzione del blocco. Ciò significherebbe che potresti avere un contenitore multicol con un'altezza e, una volta che il contenuto ha creato colonne che hanno riempito quel contenitore, viene creato un nuovo set di colonne di seguito. Questo sembrerebbe un po' come il nostro esempio di spanning sopra, tuttavia, invece di avere una chiave che fa iniziare le nuove caselle di colonna, sarebbe l'overflow causato da un contenitore con una restrizione nella dimensione del blocco.

Questa funzione renderebbe multicol molto più utile per il web. Anche se in questo momento siamo un po' lontani, puoi tenere d'occhio il problema nel repository del CSS Working Group. Se hai casi d'uso aggiuntivi per questa funzione, pubblicali, può davvero aiutare durante la progettazione della nuova funzionalità.

A cosa serve Multicol oggi?

Con la specifica attuale, non è consigliabile dividere tutto il contenuto in colonne senza considerare i problemi di scorrimento. Tuttavia, ci sono alcuni casi in cui multicol è l'ideale sul web. Ci sono abbastanza casi d'uso per renderlo qualcosa che dovresti considerare quando guardi i modelli di progettazione.

Comprimere l'interfaccia utente o gli elementi di testo di piccole dimensioni

Multicol può essere utile in qualsiasi luogo in cui hai un piccolo elenco di elementi che desideri occupare meno spazio. Ad esempio un semplice elenco di caselle di controllo o un elenco di nomi. Spesso in questi scenari, il visitatore non legge una colonna e poi torna all'inizio della successiva, ma scansiona il contenuto per cercare una casella di controllo su cui fare clic o un elemento da selezionare. Anche se crei un'esperienza a scorrimento, potrebbe non essere un problema.

Puoi vedere un esempio di multicol utilizzato in questo modo da Sander de Jong sul sito web di DonarMuseum.

Piccole quantità note di contenuto

Ci sono momenti in cui progettiamo un sito in cui sappiamo che alcuni contenuti sono relativamente piccoli e si adattano alla maggior parte degli schermi senza causare uno scorrimento indesiderato. Ho usato multicol nelle pagine di presentazione di Notist, per l'introduzione a un discorso.

Andy Clarke ha disegnato un bell'esempio per il sito web di Equfund.

Per evitare la possibilità che schermate molto piccole causino lo scorrimento, ricorda che puoi utilizzare le query multimediali per verificare l'altezza e la larghezza (o in un mondo logico, bloccare o inline). Se abiliti le colonne solo in un punto di interruzione che ha min-height sufficientemente grande per il loro contenuto, questo può far risparmiare agli utenti di dispositivi molto piccoli una scarsa esperienza di scorrimento.

Visualizzazione del contenuto simile a una muratura

Un altro posto in cui il layout a colonne multiple funziona magnificamente è se si desidera creare un tipo di visualizzazione dei contenuti in muratura. Multicol è l'unico metodo di layout che attualmente creerà questo tipo di layout con elementi di altezza diversa. La griglia lascerebbe uno spazio vuoto o allungherebbe gli elementi per creare una rigida griglia bidimensionale.

Veerle Pieters ha un bellissimo esempio di utilizzo di multicol in questo modo nella sua pagina di ispirazione.

Griglia e Flexbox Fallback

Le proprietà della column- possono essere utilizzate anche come fallback per il layout Grid e Flex. Se specifichi una delle proprietà su un contenitore, trasforma quel contenitore in un layout Flex o Grid utilizzando display: flex o display: grid qualsiasi comportamento di colonna verrà rimosso. Se si dispone, ad esempio, di un layout di schede che utilizza Layout griglia e il layout sarebbe leggibile se fosse eseguito in colonne anziché su tutta la pagina, è possibile utilizzare multicol come semplice fallback. I browser che non supportano la griglia avranno la visualizzazione multicol, quelli che supportano la griglia avranno il layout della griglia.

Non dimenticare Multicol!

Abbastanza frequentemente rispondo a domande su Grid e Flexbox in cui la risposta è non usare Grid o Flexbox, ma invece guardare Multicol. Probabilmente non lo utilizzerai su tutti i siti, ma quando ti imbatti in un caso d'uso può essere davvero utile. Oltre a MDN ci sono risorse utili per multicol e le relative proprietà di frammentazione.

Se hai usato multicol su un progetto, magari lascia una nota nei commenti, per condividere altri modi in cui possiamo usare la funzione.