CSS3 Multi-column layout

A popularidade dos monitores wide screen aumenta a cada dia, ou
seja, os monitores aumentam na largura. Já com os sites, acontece o oposto.
Levando em consideração que a resolução mais comum hoje em dia é a de
1024×768, a maioria dos sites não utiliza todo esse espaço
disponível nas laterais do site.

Nessa hora quem se dá bem são os layouts flexíveis, mas pecam em
manter uma linha útil de comprimento. Especialistas em design dizem que
o comprimento de texto ideal para uma linha deve ser entre 8 a 12
palavras. A mídia impressa, especialmente os jornais, não está nem aí
para isso, sabe por quê? Eles podem dividir o texto em várias colunas.

Como um Web Designer, você pode tentar manter o fluxo de texto bem
equilibrado entre várias colunas. Mas como você sabe a web não é um
meio onde você possui total controle sobre a apresentação final da
informação.

Seu layout pode ir para o espaço caso seus usuários utilizem um
tamanho de fonte diferente da que você especificou. Da mesma forma
quando você passa do texto estático do HTML para um texto que vem do
banco de dados, você pode perder todo o controle sobre a estrutura. Sua
marcação HTML então deve acomodar todo o conteúdo em um ambiente como o
tamanho desconhecido.

Esse problema não é novo. Aliás, muito poucas pessoas têm considerado o problema, inclusive os membros do W3C.

CSS3 module: Multi-column layout

O módulo Multi-column layout das CSS3 proposto pelo W3C visa
estender o modelo de box atual do CSS. A intenção do módulo é que é
permitir que o conteúdo flua para várias colunas dentro de um elemento.
Ele oferece novas propriedades CSS que permitem aos desenvolvedores
especificar em quantas colunas um elemento deve ser processado. O
navegador se encarrega de formatar o texto de modo que as colunas sejam
balanceadas.

A proposta de novas propriedades são as seguintes:

• ‘column-count’: Determina o número de colunas em que o conteúdo do elemento deve fluir.
• ‘column-width’: Determina a largura ideal de cada coluna.
• ‘columns’: Declaração curta para as propriedades ‘column-width’ e ‘column-count’.
• ‘column-gap’: Determina o padding(área) entre as colunas.
• ‘column-rule-color’: Determina a cor da borda entre as colunas.
• ‘column-rule-style’: Determina o estilo da borda, o mesmo previsto na CSS 2.1.
• ‘column-rule-width’: Determina a largura da borda entre as colunas.
• ‘column-rule’: Declaração curta para as propriedades ‘column-rule-color’, ‘column-rule-style’ e ‘column-rule-width’.
• ‘column-span’: Determina quantas colunas um elemento abrange.

Para ver uma descrição detalhada de cada um desses elementos, visite o W3C Working Draft.

Suporte dos browsers

Os browsers atuais que possuem suporte a essa especificação são os seguintes:

• Firefox 2.0+
• Safari 3.1+
• Google Chrome 1.0+
• Internet Explorer 8 e Opera 10 não davam suporte até o fechamento desse post.

Alternativas via JavaScript

Michael van Ouwerkerk, em 2002, escreveu um JavaScript
que divide o conteúdo de um elemento e reorganizá-lo em várias colunas.
Dúvidas sobre como implementar, basta visitar o site do desenvolvedor.

Exemplo

Para esse exempo, vamos utilizar a seguinte marcação HTML:

<div id="intro"><br />    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem. Donec pretium lorem vel ligula. Fusce semper consequat dui. Integer ac mi. Cras faucibus nulla quis ipsum. Nunc augue turpis, tristique et, hendrerit id, hendrerit eu, lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vulputate. Proin et erat id ipsum accumsan porttitor. Suspendisse tellus arcu, scelerisque vel, feugiat sit amet, aliquet sed, velit. Aenean eget erat id massa sodales.</p><br />    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu. Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem. Donec pretium lorem vel ligula. Fusce semper consequat dui. Integer ac mi. Cras faucibus nulla quis ipsum. Nunc augue turpis, tristique et, hendrerit id, hendrerit eu, lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vulputate. Proin et erat id ipsum accumsan porttitor. Suspendisse tellus arcu, scelerisque vel, feugiat sit amet, aliquet sed, velit. Aenean eget erat id massa sodales.</p><br />    ....<br />    </div>

Como podem ver, tudo muito simples, mas o grande segredo está no CSS
e é onde iremos colocar em prática as propriedades CSS mostradas acima:

#intro {<br />	-moz-column-count:4;<br />	-moz-column-gap:20px;<br />	-webkit-column-count:4;<br />	-webkit-column-gap:20px;<br />	column-count:4;<br />	column-gap:20px;<br />}

Veja aqui o exemplo em ação onde o texto foi dividido em 4 colunas.

*

Esse post foi escrito com base no original de A List Apart e sofreu algumas alterações.