Se è necessario un numero esatto di colonne quando si progetta un layout a più colonne, utilizzare column-count.
.lead ( column-count: 3; )Dato il numero di colonne, il browser distribuirà uniformemente il contenuto esattamente in quel numero di colonne.
Questa proprietà può essere utilizzata anche come abbreviazione per columnse può essere utilizzata in tandem con column-width. Quando vengono dichiarate entrambe le proprietà column-countè il numero massimo di colonne.
Valori
column-countpuò essere autoo un numero intero.
Usa autose stai usando anche column-width. Pensalo come un modo per dire al browser, per lasciare column-widthprendere l'iniziativa.
L'intero, noto anche come numero di colonne, deve essere maggiore o uguale a 0.
A differenza di column-widthquesta proprietà, manterrà il numero di colonne indipendentemente dalla larghezza del browser. Ciò significa che se hai visualizzato un layout a 5 colonne sul tuo telefono cellulare, avrai un layout a 5 colonne molto schiacciato per navigare. column-countfunziona meglio insieme column-width.
Supporto browser
Supporto layout multi-colonna:
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Qualunque | 3+ | 1.5+ | 11.1+ | 10+ | 81 | 3.2+ |
Non dimenticare i tuoi prefissi se non stai già utilizzando uno strumento che ti aiuta già.