Múltiplas Colunas com CSS3

Sem Comentários

Por mais de seis anos, colunas em CSS3 estão disponíveis para nós, porém são raramente usadas. Atualmente elas são disponíveis apenas em navegadores Mozilla e Webkit, significando que não funcionam em navegadores Internet Explorer (sempre eles…).

Mas tudo bem! O mundo nao vai acabar se os usuários de IE virem apenas um parágrafo longo. Agora irei demonstrar como usar esta funcionalidade tao útil.

As propriedades CSS3 utilizadas são:

• column-count: A quantidade de colunas desejadas.
• column-gap: O espaçamento entre colunas (padding).
• column-rule: O divisor de colunas (pode ser usado para especificar uma borda).
• column-width: A largura das colunas.

Note que devemos usar o prefixo -webkit ou -moz adequadamente:

#container p {
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;

    -moz-column-count: 2;
    -moz-column-gap: 10px;

    column-count: 2;
    column-gap: 10px;
}

<div id="container">
    <h2> Gostaram? </h2>
    <p>
        Se você estiver no Internet Explorer, vai ver apenas um parágrafo comum.
        Lorem ipsum dolor sit amet, ...
	</p>
</div>

Abaixo um exemplo dos código acima em ação:

Você usa colunas com CSS3 em seus projetos? Se não, por quê?