Come organizzare i contenuti in colonne utilizzando poche righe di codice CSS

Organizzare i contenuti di un elenco in colonne può sembrare, a prima vista, un compito complesso. Spesso ci troviamo ad affrontare lunghi blocchi di codice o ad installare librerie e Framework per ottenere un risultato che, invece, si può ottenere con pochi semplici accorgimenti. In questo articolo vedremo come utilizzare la proprietà CSS column-count per semplificare il layout, ridurre il codice e migliorare l’efficienza del nostro sito web.

Le problematiche comuni nella gestione di elenchi a colonne

Quando si cerca di visualizzare un elenco in più colonne, ci si imbatte spesso in difficoltà legate a:

• Eccesso di codice personalizzato: decine di righe di codice CSS e HTML dedicate esclusivamente a questa struttura.
• Uso di librerie esterne: spesso integrate solo per questa specifica esigenza, aumentando il peso del progetto.
• Query annidate nel backend: se la lista è generata dinamicamente, l’elaborazione può essere inutilmente complessa e pesante per il Database.

Un esempio concreto di questa complessità ci è capitato recentemente, durante l’ottimizzazione dello speed test di un sito web. Ci siamo trovati di fronte a un elenco di 50 tipi di automobili organizzato in 4 colonne, gestito attraverso:

1. Due query MySQL annidate.
2. Una libreria esterna di layout.

Questa configurazione, pur funzionando, rallentava il caricamento della pagina e aumentava inutilmente la complessità del codice. La soluzione? Sfruttare il CSS moderno.

Le problematiche comuni nella gestione di elenchi a colonne

Quando si cerca di visualizzare un elenco in più colonne, ci si imbatte spesso in difficoltà legate a:

• Eccesso di codice personalizzato: decine di righe di codice CSS e HTML dedicate esclusivamente a questa struttura.
• Uso di librerie esterne: spesso integrate solo per questa specifica esigenza, aumentando il peso del progetto.
• Query annidate nel backend: se la lista è generata dinamicamente, l’elaborazione può essere inutilmente complessa e pesante per il database.

Un esempio concreto di questa complessità ci è capitato recentemente, durante l’ottimizzazione dello speed test di un sito web. Ci siamo trovati di fronte a un elenco di 50 tipi di automobili organizzato in 4 colonne, gestito attraverso:

1. Due query MySQL annidate.
2. Una libreria esterna di layout.

Questa configurazione, pur funzionando, rallentava il caricamento della pagina e aumentava inutilmente la complessità del codice. La soluzione? Sfruttare il CSS moderno.

.colonne-auto {
-moz-column-count: 4;
-moz-column-gap: 1em;
-webkit-column-count: 4;
-webkit-column-gap: 1em;
column-count: 4;
column-gap: 1em;
}

Come funziona il codice column-count 

1. column-count: questa proprietà definisce il numero di colonne in cui suddividere il contenuto. Nel nostro esempio, abbiamo impostato 4 colonne.
2. column-gap: specifica lo spazio (in unità di misura CSS come em o px) tra le colonne, per migliorare la leggibilità.
3. Compatibilità con i browser: per garantire un supporto ampio, abbiamo incluso i prefissi -moz- (per Firefox) e -webkit- (per Safari e Chrome).

Grazie a queste poche righe, il layout risulta immediatamente pulito e ottimizzato, senza la necessità di librerie o logiche complicate.

Vantaggi dell’uso di column-count 

Scegliere di organizzare i contenuti in colonne con column-count offre numerosi benefici:

1. Riduzione del codice: meno righe significano meno errori e una manutenzione più semplice.
2. Ottimizzazione delle prestazioni: eliminando librerie esterne e query superflue, il sito diventa più veloce.
3. Flessibilità: la distribuzione degli elementi si adatta automaticamente al contenitore, facilitando il design responsivo.
4. Compatibilità con i dispositivi moderni: tutti i principali browser supportano questa proprietà.

Quando utilizzare column-count 

Nonostante la sua efficacia, column-count non è la soluzione ideale per ogni scenario. È perfetto per:

• Elenchi statici: ad esempio, una lista di prodotti, categorie o opzioni.
• Contenuti testuali: articoli, paragrafi o citazioni che beneficiano di un layout a colonne.

Tuttavia, per contenuti dinamici e complessi, potrebbe essere necessario combinare questa proprietà con altre tecniche di layout o JavaScript.

La proprietà column-count rappresenta una soluzione semplice e potente per organizzare contenuti in colonne, riducendo drasticamente il codice necessario e migliorando le performance del sito. Come dimostrato dall’esempio dell’elenco di automobili, con soli pochi accorgimenti è possibile ottenere un risultato elegante e performante.

Se sei alla ricerca di modi per ottimizzare i tuoi progetti, questa tecnica potrebbe diventare una risorsa indispensabile nel tuo arsenale di sviluppo web. Provala nel tuo prossimo progetto e scopri quanto può semplificarti il lavoro!