Quando você quiser manter suas colunas em uma largura específica, use column-width.
section ( -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; )O navegador calculará quantas colunas de pelo menos essa largura cabem no espaço. Pense nisso column-widthcomo uma sugestão de largura mínima para o navegador.
column-widthé uma propriedade flexível. Uma vez que o navegador não pode caber pelo menos 2 colunas na largura especificada, as colunas irão parar e cair em uma única coluna.
Essa propriedade também é usada como abreviação de columnse pode ser usada em conjunto com column-count. Quando ambas as propriedades são declaradas, column-counté o número máximo de colunas.
Valores
Você pode definir column-widthpara autoou um comprimento.
Use autose você também estiver usando column-countou se precisar desligar o imóvel. Pense nisso como uma forma de dizer ao navegador para deixar column-countassumir a liderança.
Para especificar a largura das colunas, use um comprimento maior que (ou igual a) 0. Você pode usar qualquer unidade CSS, exceto a porcentagem.
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+ | 2,3+ | 6,1+ |
Não se esqueça dos seus prefixos!