Generatore di colonne multiple CSS

Cos'è il layout multi-colonna in CSS

CSS Multi-column Layout (la specifica W3C "CSS Multi-column Layout Module Level 1") fa fluire automaticamente il contenuto di un singolo elemento su due o più colonne, allo stesso modo in cui la stampa di giornali e riviste gestisce da secoli i testi lunghi. Dichiari quante colonne vuoi (o quanto larga ogni colonna deve essere) e il browser distribuisce il contenuto dall'alto in basso, da sinistra a destra, bilanciando il numero di righe in modo che ogni colonna finisca a un'altezza simile. Il modulo è diventato W3C Candidate Recommendation nell'aprile 2011 ed è stato spedito in forma utilizzabile dai browser tra Firefox 3.5 (giugno 2009) e IE 10 (ottobre 2012). È una funzione di base della piattaforma web da oltre un decennio. A differenza di Flexbox o Grid, che allineano elementi figli discreti in posizioni note, il layout multi-colonna tratta il contenuto come un singolo flusso continuo che il browser taglia in colonne in base all'altezza disponibile.

Quando le colonne CSS sono lo strumento giusto

• Testo di articoli lunghi su schermi larghi. Leggere testo a colonna singola più larga di ~75 caratteri stanca l'occhio, lo sguardo del lettore deve viaggiare troppo lontano per trovare l'inizio della riga successiva. Un layout a due colonne dimezza la lunghezza della riga usando lo stesso spazio verticale, migliorando notevolmente la leggibilità su display widescreen.
• Liste di definizioni e glossari. Lunghi elenchi alfabetici di voci brevi si distribuiscono naturalmente su più colonne senza bisogno di bilanciarli a mano.
• Liste di link nel footer. Il classico footer "mappa del sito" con decine di link, categorie verticali e link orizzontali, è un caso perfetto per column-count.
• Liste di caratteristiche ed enumerazioni puntate. Una lunga lista di funzionalità che scorrerebbe all'infinito su una sola colonna si legge meglio su due o tre.
• Fogli di stile per la stampa. Il layout multi-colonna è una delle poche funzionalità CSS che si trasferisce splendidamente alla stampa, il formato che i giornali usano da quando esistono.

column-count contro column-width, la distinzione più importante

Due modi di specificare le colonne, e la scelta conta per il design responsivo. column-count: 3 blocca tre colonne, a qualsiasi larghezza del viewport il browser produce esattamente tre colonne, che si stringono mentre il container si stringe. Su un telefono, tre colonne diventano sottili strisce illeggibili. column-width: 250px invece chiede colonne "larghe almeno 250 pixel"; il browser calcola quante ne entrano nel container e fluisce automaticamente al variare del viewport. Schermi larghi ottengono molte colonne, schermi stretti ne ottengono poche o una, senza una sola media query. La combinazione è la best practice moderna: columns: 250px 4 (forma abbreviata di column-width più column-count) significa "colonne larghe 250px, ma mai più di 4". Il browser produce 4 colonne su un desktop largo, meno su un tablet, una su un telefono, automaticamente responsivo. La maggior parte del CSS in produzione usa questa forma combinata per il vantaggio di robustezza.

Controllare dove si interrompe il contenuto

Per impostazione predefinita il browser interrompe le colonne dove capita, il che a volte separa un titolo dal suo primo paragrafo o spezza una card a metà. La proprietà CSS break-inside: avoid (CSS Fragmentation Module Level 3) dice al browser "non spezzare questo elemento tra colonne", tipicamente applicata a card, figure e qualsiasi contenuto che debba restare unito. break-before: column forza un'interruzione di colonna prima di un elemento, utile per "inizia ogni sezione in una nuova colonna". column-span: all fa sì che un titolo o un richiamo si estenda su tutta la larghezza attraverso tutte le colonne, uscendo dal flusso delle colonne, tipico per il titolo di un articolo sopra un corpo a più colonne.

Trappole da tenere d'occhio

Il layout multi-colonna ha interazioni sottili che vale la pena conoscere. L'ordine di lettura per gli screen reader segue l'ordine del DOM, che generalmente coincide con l'ordine visivo dall'alto in basso delle colonne, ma le tecnologie assistive possono occasionalmente confondersi su layout complessi. L'impaginazione per la stampa con multi-colonna può produrre uno strano bilanciamento delle colonne tra le interruzioni di pagina; testa con i fogli di stile per la stampa se ti interessa l'output stampato. Il contenuto lungo riempie verso il basso, se dai a un container multi-colonna un'altezza fissa più piccola di quella che serve al contenuto, il contenuto trabocca; se non vincoli l'altezza, il browser bilancia le colonne a una lunghezza approssimativamente uguale. Il contenuto ancorato (form, elementi interattivi che devono restare in un punto preciso) funziona male nelle colonne perché l'utente non sa dove guardare. Mescolare con Grid o Flexbox allo stesso livello produce risultati imprevedibili, scegli un solo metodo di layout per container.

Proprietà CSS generate

• column-count, numero fisso di colonne
• column-width, larghezza minima di colonna per layout responsive
• column-gap, spazio tra le colonne
• column-rule, linea decorativa tra le colonne (spessore, stile, colore)
• column-span, elementi che si estendono su tutte le colonne (titoli)