Ao adicionar altura a um elemento de várias colunas, você pode controlar como o conteúdo preenche as colunas. O conteúdo pode ser balanceado ou preenchido sequencialmente.
ul ( height: 300px; -webkit-columns: 3; -moz-columns: 3; columns: 3; -moz-column-fill: balance; column-fill: balance; )Esta propriedade está disponível apenas no Firefox. O Firefox irá equilibrar automaticamente o conteúdo em um layout de várias colunas com restrição de altura. Os outros navegadores sempre preencherão as colunas sequencialmente quando receberem uma restrição de altura.
Para fazer o Firefox se comportar como os outros navegadores, ou seja, para preencher as colunas sequencialmente, você pode definir column-fill: auto.
Valores
column-fillaceita os valores de palavra-chave balancee auto.
balanceirá preencher cada coluna com aproximadamente a mesma quantidade de conteúdo, mas não permitirá que as colunas cresçam mais do que o height. Você pode descobrir que as colunas ficarão mais curtas que o heightconforme o navegador distribui o conteúdo horizontalmente.
autopreencherá cada coluna até atingir o heighte fará isso até que fique sem conteúdo. Dado o conteúdo, este valor não preencherá necessariamente todas as colunas nem as preencherá uniformemente.
É como derramar suco em copos. Você pode derramar uma quantidade igual de suco em cada copo e descobrir que não enche cada copo até o topo ( balance). Como alternativa, você pode encher um copo até o topo e repetir até que não haja mais suco. Como resultado, os copos restantes podem ter menos ou nenhum suco ( auto).
Veja o exemplo de preenchimento de coluna Pen (CSS-Tricks) por CSS-Tricks (@ css-tricks) em CodePen.
Suporte para navegador
Os column-fillvalores de palavra-chave funcionam especificamente no Firefox. Eles não funcionaram em agosto de 2014, quando esta entrada do Almanaque foi originalmente escrita, mas funcionam quando testados novamente em agosto de 2015 (Chrome 44). Durante esse teste, parece que alterar o valor dinamicamente não funcionaria, você tinha que forçar um relayout.
Suporte do navegador para layout de várias colunas em geral:
| 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!
