Como dividir o conteúdo em colunas automáticas

O adjetivo “automáticas” é por minha conta. Eu chamei esse recurso assim porque há várias formas manuais de dividir o conteúdo em colunas com CSS. No modo manual você tem que saber exatamente onde começa e onde termina cada coluna para poder dividir, como no exemplo abaixo:

<div style="width: 250px; float: right; margin-left: 5px; margin-right: 5px">Conteúdo da segunda coluna.</div>
<div style="width: 250px; margin-left: 5px; margin-right: 5px">Conteúdo da primeira coluna.</div>

Curabitur cursus commodo lectus a sagittis. Donec eget eros diam, in fringilla nisl. Cras semper cursus lorem vel consectetur. Sed nibh nisi, condimentum eget ullamcorper ut, accumsan eu elit! Praesent ut fermentum orci? Maecenas faucibus fringilla lacus. Maecenas nisi elit, dictum sit amet consectetur a, vestibulum id nulla. Integer at quam sit amet mauris pretium blandit sit amet non sapien! Sed est erat, pellentesque et tincidunt ac; tempus nec est. Aenean pulvinar nibh a velit viverra vitae sagittis justo dictum. Proin lobortis varius quam a faucibus. Maecenas sollicitudin ante et tellus venenatis nec rhoncus eros commodo. Morbi est dui, accumsan quis cursus ac, interdum eu quam. Proin quam dolor, commodo vitae lacinia tincidunt, interdum eget quam. Morbi mattis tortor vitae augue rutrum congue? Donec ut volutpat mauris. Nam ut neque at lorem consectetur lobortis eu quis augue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae lacus et odio laoreet molestie non non ipsum. Ut justo orci, cursus id vehicula a, faucibus pharetra ipsum. Sed mollis nisl sed risus dapibus tempor! Sed imperdiet; velit id rhoncus porta, arcu metus sagittis purus, eu mollis quam dui eu diam. Donec nec semper ipsum. Nullam vitae velit mauris. Proin nulla tortor, commodo in faucibus non, sagittis vitae augue. Quisque condimentum massa euismod odio volutpat consectetur. Nunc mattis augue justo, sit amet fermentum libero. Pellentesque et elit nec erat mattis vestibulum vel ac metus? Curabitur gravida, eros vel tincidunt pellentesque; magna elit pulvinar libero, et euismod quam libero non neque. Integer iaculis volutpat neque et fermentum. Nulla a erat a lacus convallis aliquet. In vulputate eleifend luctus.

Desse modo é mais difícil que o resultado seja simétrico, já que a distribuição do texto pode variar de acordo com a fonte ou até mesmo com as configurações da máquina do visitante.

Diferente do que acontece no próximo exemplo que usa a prévia do CSS3 para dividir automaticamente as colunas, sem usar JavaScript. Funciona no Opera, nos navegadores parentes do Mozilla (como Firefox, Flock, Netscape), nos parentes do Safari (como Safari, Chromium e Google Chrome):

<div style="column-count:3; -moz-column-count:3; -webkit-column-count:3; column-rule:1px dashed #fc0; -moz-column-rule:1px dashed #fc0; -webkit-column-rule:1px dashed #fc0; –moz-column-gap:20px; –webkit-column-gap:20px;">Conteúdo aqui.</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae lacus et odio laoreet molestie non non ipsum. Ut justo orci, cursus id vehicula a, faucibus pharetra ipsum. Sed mollis nisl sed risus dapibus tempor! Sed imperdiet; velit id rhoncus porta, arcu metus sagittis purus, eu mollis quam dui eu diam. Donec nec semper ipsum. Nullam vitae velit mauris. Proin nulla tortor, commodo in faucibus non, sagittis vitae augue. Quisque condimentum massa euismod odio volutpat consectetur. Nunc mattis augue justo, sit amet fermentum libero. Pellentesque et elit nec erat mattis vestibulum vel ac metus? Curabitur gravida, eros vel tincidunt pellentesque; magna elit pulvinar libero, et euismod quam libero non neque. Integer iaculis volutpat neque et fermentum. Nulla a erat a lacus convallis aliquet. Proin quam dolor, commodo vitae lacinia tincidunt, interdum eget quam. Morbi mattis tortor vitae augue rutrum congue? Donec ut volutpat mauris. Nam ut neque at lorem consectetur lobortis eu quis augue. In vulputate eleifend luctus.

Curabitur cursus commodo lectus a sagittis. Donec eget eros diam, in fringilla nisl. Cras semper cursus lorem vel consectetur. Sed nibh nisi, condimentum eget ullamcorper ut, accumsan eu elit! Praesent ut fermentum orci? Maecenas faucibus fringilla lacus. Maecenas nisi elit, dictum sit amet consectetur a, vestibulum id nulla. Integer at quam sit amet mauris pretium blandit sit amet non sapien! Sed est erat, pellentesque et tincidunt ac; tempus nec est. Aenean pulvinar nibh a velit viverra vitae sagittis justo dictum. Proin lobortis varius quam a faucibus. Maecenas sollicitudin ante et tellus venenatis nec rhoncus eros commodo. Morbi est dui, accumsan quis cursus ac, interdum eu quam.

In faucibus adipiscing imperdiet. Aenean consectetur felis eu velit porttitor semper. Maecenas pharetra orci vitae quam congue luctus. Suspendisse nibh metus, venenatis ut sagittis eu, sollicitudin quis felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tempor consequat faucibus. Aenean dictum porta consectetur. Curabitur rhoncus, nunc quis eleifend suscipit, lectus neque tempor sem, at dictum massa neque et odio. Sed non turpis enim, eu dapibus nisl. Nam suscipit, leo posuere tempus hendrerit, nunc eros sodales dolor, sed luctus lectus sapien aliquam metus! Morbi congue dui sit amet ante bibendum sollicitudin. Donec aliquam metus eu tellus fermentum et tincidunt lorem luctus. Etiam nunc tellus, vulputate ac fermentum ut, convallis sit amet enim.

Os usuários do Internet Explorer e do Opera verão o texto normalmente, sem nenhum arranhão, porém, sem colunas.

Observe esse outro exemplo:

<div style=" column-width: 200px; -moz-column-width: 200px; -webkit-column-width: 200px; column-gap: 20px; -moz-column-gap: 20px; -webkit-column-gap: 20px; column-rule: 7px double #fcf; -moz-column-rule: 7px double #fcf; -webkit-column-rule: 7px double #fcf;">Conteúdo aqui.</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae lacus et odio laoreet molestie non non ipsum. Ut justo orci, cursus id vehicula a, faucibus pharetra ipsum. Sed mollis nisl sed risus dapibus tempor! Sed imperdiet; velit id rhoncus porta, arcu metus sagittis purus, eu mollis quam dui eu diam. Donec nec semper ipsum. Nullam vitae velit mauris. Proin nulla tortor, commodo in faucibus non, sagittis vitae augue. Quisque condimentum massa euismod odio volutpat consectetur. Nunc mattis augue justo, sit amet fermentum libero. Pellentesque et elit nec erat mattis vestibulum vel ac metus? Curabitur gravida, eros vel tincidunt pellentesque; magna elit pulvinar libero, et euismod quam libero non neque. Integer iaculis volutpat neque et fermentum. Nulla a erat a lacus convallis aliquet. Proin quam dolor, commodo vitae lacinia tincidunt, interdum eget quam. Morbi mattis tortor vitae augue rutrum congue? Donec ut volutpat mauris. Nam ut neque at lorem consectetur lobortis eu quis augue. In vulputate eleifend luctus.

Curabitur cursus commodo lectus a sagittis. Donec eget eros diam, in fringilla nisl. Cras semper cursus lorem vel consectetur. Sed nibh nisi, condimentum eget ullamcorper ut, accumsan eu elit! Praesent ut fermentum orci? Maecenas faucibus fringilla lacus. Maecenas nisi elit, dictum sit amet consectetur a, vestibulum id nulla. Integer at quam sit amet mauris pretium blandit sit amet non sapien! Sed est erat, pellentesque et tincidunt ac; tempus nec est. Aenean pulvinar nibh a velit viverra vitae sagittis justo dictum. Proin lobortis varius quam a faucibus. Maecenas sollicitudin ante et tellus venenatis nec rhoncus eros commodo. Morbi est dui, accumsan quis cursus ac, interdum eu quam.

Caso você não tenha visto nenhuma coluna nos exemplos acima é porque não está em um navegador compatível, segue então uma imagem para você ter uma noção:

 

Compreendendo as propriedades:

• column-count - define o número de colunas no Opera.
• -moz-column-count - define o número de colunas nos navegadores que usam a engine Gecko (parentes do Mozilla).
• -webkit-column-count - define o número de colunas nos navegadores que usam a engine Webkit (parentes do Safari).
• column-rule - define a linha que vai aparecer entre as colunas no Opera. As características são as mesmas das bordas: espessura, estilo e cor, mas você também pode colocá-las separadas:
  • column-rule-width - largura da linha vertical.
  • column-rule-style - estilo da linha vertical.
  • column-rule-color - cor da linha vertical
• -moz-column-rule - define a linha que vai aparecer entre as colunas nos navegadores Gecko.
  • -moz-column-rule-width - largura da linha vertical.
  • -moz-column-rule-style - estilo da linha vertical.
  • -moz-column-rule-color - cor da linha vertical
• -webkit-column-rule - define a linha que vai aparecer entre as colunas nos navegadores WebKit.
  • -webkit-column-rule-width - largura da linha vertical.
  • -webkit-column-rule-style - estilo da linha vertical.
  • -webkit-column-rule-color - cor da linha vertical
• column-width - define a largura de cada coluna no Opera.
• -moz-column-width - define a largura de cada coluna nos navegadores Gecko.
• -webkit-column-width - define a largura de cada coluna nos navegadores WebKit.
• column-gap - define a distância entre as colunas no Opera.
• -moz-column-gap - define a distância entre as colunas nos navegadores Gecko.
• -webkit-column-gap - define a distância entre as colunas nos navegadores WebKit.

Definindo na folha de estilos:

Você também pode definir as características das colunas direto na folha de estilos. Observe o exemplo abaixo usando a folha de estilos do Blogger:

div#trescol {column-count:3; -moz-column-count:3; column-gap:15px -moz-column-gap:15px; column-rule:1px solid #fc0; -moz-column-rule:1px solid #fc0; -webkit-column-count:3; -webkit-column-gap:15px; -webkit-column-rule:1px solid #fc0;}

div#duascol {column-count:2; -moz-column-count:2; column-gap:15px; -moz-column-gap:15px; column-rule:1px solid #fc0; -moz-column-rule:1px solid #fc0; -webkit-column-count:2; -webkit-column-gap:15px; -webkit-column-rule:1px solid #fc0;}

]]></b:skin>

Em uma folha de estilos padrão:

<style>

div#trescol {column-count:3; -moz-column-count:3; column-gap:15px; -moz-column-gap:15px; column-rule:1px solid #fc0; -moz-column-rule:1px solid #fc0; -webkit-column-count:3; -webkit-column-gap:15px; -webkit-column-rule:1px solid #fc0;}

div#duascol {column-count:2; -moz-column-count:2; column-gap:15px; -moz-column-gap:15px; column-rule:1px solid #fc0; -moz-column-rule:1px solid #fc0; -webkit-column-count:2; -webkit-column-gap:15px; -webkit-column-rule:1px solid #fc0;}

</style>

Assim, sempre que quiser dividir o conteúdo do post em três colunas, basta utilizar a id definida na folha de estilos:

<div id='trescol'>Conteúdo do post aqui.</div>

Quando quiser usar duas colunas:

<div id='duascol'>Conteúdo do post aqui</div>

Não adianta testar esse recurso usando o Windows Live Writer, porque o visualizador dele simula o Internet Explorer, um navegador não compatível com o recurso.

Atualmente uso colunas automáticas nos seguintes posts:

• Parcerias
• Tutoriais de HTML e CSS

Fontes: Chris B., CSS3.info, Lorem Ipsum, W3C