Colonne - Trucchi CSS | CSS Almanac 2025

Con poche regole CSS, puoi creare un layout ispirato alla stampa che ha la flessibilità del web. È come prendere un giornale, ma man mano che la carta si rimpicciolisce, le colonne si regoleranno e si bilanciano automaticamente, consentendo al contenuto di scorrere naturalmente.

.intro ( columns: 300px 2; )

La columnsstruttura accetta column-count, column-widtho entrambe le proprietà.

columns: || ;

Si consiglia di utilizzare entrambi column-counte column-widthper creare un layout flessibile a più colonne. Il column-countagirà come il numero massimo di colonne, mentre il column-widthdetterà la larghezza minima per ogni colonna. Mettendo insieme queste proprietà, il layout a più colonne si scomporrà automaticamente in una singola colonna a larghezze del browser ridotte senza la necessità di media query o altre regole.

Un layout a più colonne funziona alla grande sugli elementi del blocco, inclusi gli elenchi per rendere una navigazione flessibile.

Per ottimizzare ulteriormente il layout a più colonne, utilizzare break-insidesu elementi specifici per evitare che rimangano bloccati tra le colonne.