Se você precisar de um número exato de colunas ao projetar um layout de várias colunas, use column-count.
.lead ( column-count: 3; )Dado o número de colunas, o navegador distribuirá uniformemente o conteúdo exatamente nesse número de colunas.
Essa propriedade também pode ser usada como abreviação de columnse pode ser usada em conjunto com column-width. Quando ambas as propriedades são declaradas, column-counté o número máximo de colunas.
Valores
column-countpode ser autoou um inteiro.
Use autose você também estiver usando column-width. Pense nisso como uma forma de dizer ao navegador para deixá-lo column-widthassumir a liderança.
O número inteiro, também conhecido como número de colunas, deve ser maior ou igual a 0.
Ao contrário column-widthdesta propriedade irá manter o número de colunas, independentemente da largura do navegador. Isso significa que se você puxou um layout de 5 colunas em seu telefone celular, você terá um layout de 5 colunas muito apertado para navegar. column-countfunciona melhor ao lado column-width.
Suporte para navegador
Suporte para layout de várias colunas:
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nenhum | 3+ | 1.5+ | 11,1+ | 10+ | 81 | 3,2+ |
Não se esqueça dos seus prefixos se não estiver usando uma ferramenta que já ajude com isso.