Com o controle de colunas no CSS, podemos definir colunas de texto de forma automática. Até hoje não havia maneira de fazer isso de maneira inteligente com CSS e o grupo de propriedades columns pode fazer isso de maneira livre de gambiarras.
column-count
A propriedade column-count define a quantidade de colunas terá o bloco de textos.
/* Define a quantidade de colunas, a largura é definida uniformemente.*/
-moz-column-count: 2;
-webkit-column-count: 2;
column-width
Com a propriedade column-width definimos a largura destas coluna.
/* Define qual a largura mínima para as colunas. Se as colunasforem espremidas, fazendo com que a largura delas fique menor queeste valor, elas se transformam em 1 coluna automaticamente */
-moz-column-width: 400px;
-webkit-column-width: 400px;
Fiz alguns testes aqui e há uma diferença entre o Firefox 3.5 e o Safari 4 (Public Beta).
O column-width define a largura mínima das colunas. Na documentação do W3C é a seguinte:imagine que você tenha uma área disponível para as colunas de 100px. Ou seja, você tem um divcom 100px de largura (width). E você define que as larguras destas colunas (column-width) sejamde 45px. Logo, haverá 10px de sobra, e as colunas irão automaticamente ter 50px de largura, preenchendoeste espaço disponível. É esse o comportamento que o Firefox adota.
Já no Safari, acontece o seguinte: se você define um column-width, as colunas obedecem a esse valore não preenchem o espaço disponível, como acontece na explicação do W3C e como acontecetambém no Firefox. Dessa forma faz mais sentido para mim.
Como a propriedade não está 100% aprovada ainda, há tempo para que isso seja modificado novamente.Talvez a mudança da nomenclatura da classe para column-min-width ou algo parecidavenha a calhar, assim, ficamos com os dois resultados citados, que são bem úteis para nós de qualquermaneira.
column-gapA propriedade column-gap
cria um espaço entre as colunas, um gap.
/* Define o espaço entre as colunas. */
-moz-column-gap: 50px;
-webkit-column-gap: 50px;
Utilizamos aqui os prefixos -moz- e -webkit-, estas propriedades não funcionam oficialmente emnenhum browser. Mas já podem ser usados em browsers como Firefox e Safari.
