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

Molto spesso per organizzare i contenuti di un elenco in colonne incontriamo righe e righe di codice. Talvolta vediamo installati librerie di framework ad hoc, oppure il più disparato codice personalizzato.

Per non parlare poi se questa lista viene generata da una query su un database.

Oggi, in un lavoro di ottimizzazione dello speed test di un sito, abbiamo in contrato un elenco di 50 tipi di automobili visualizzate in 4 colonne, gestito da ben due query annidate e tramite una libreria esterna.

Ci è sembrato doveroso sostituire la libreria e una query MySql con utilizzando la proprietà CSS column-count. Abbiamo eliminando 76 righe di codice con una classe CSS di appena 6.

Eccola:

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

Speriamo che vi possa essere di aiuto e vi faccia risparmiare codice.