Hoje, vamos dar continuidade as propriedades de interface para CSS3. No post anterior falamos sobre box-sizing e resize, agora iremos ver as propriedades para múltiplas colunas ( columns, column-count, column-widht, column-gap, …). Depois de ler este artigo você deverá no mínimo, saber tudo sobre múltiplas colunas em CSS3!

Múltiplas Colunas com CSS3

Até o CSS2, dividir um layout em colunas era um pouco complicado, tendo de recorrer, como melhor opção, ao uso de grids (Grid 960 e etc…). Com CSS3 essa história já muda!

Basicamente, a diferença entre um Grid CSS – por favor pesquise sobre o assunto se ainda não tem conhecimento -, e o módulo para múltiplas colunas em CSS3 é: com CSS3 as colunas são mais flexiveis, tornando mais fácil a manipulação, o HTML irá “fica de lado”, sem deixar de ter o mesmo resultado de um Grid CSS, com algumas melhorias é claro… Vejamos como manipular múltiplas colunas em CSS3:

Column-width

Sintax: [-moz- | -webkit-]?column-width: <medida> | auto

A especificação para column-width é bem simples… A princípio pode parecer um pouco confuso, que relação há entre column-width e múltiplas colunas, pois olhando “logicamente”, definir o width de uma coluna não trará múltiplas colunas, certo? O que acontece aqui, não é essa “lógica”; Quando você define um valor para column-width, CSS3 faz um cálculo para definir quantas colunas se encaixam na área, tendo como base o tamanho da área total e o valor para column-width. Ok, vejamos um pouco de matemática.

Suponhamos que eu tenho uma área de 600px, e o valor para column-width é 200px. Logo 600/200 = 3, resultando 3 colunas. É exatamamente este o cálculo. Bom e agora o que acontece? Como estamos falando de múltiplas colunas, CSS3 irá criar automaticamente (é essa a grande façanha do CSS3 :)), 3 colunas em nossa área, dividindo o conteúdo de forma proporcional. Mas e o HTML, Grid CSS…? Não precisa! Viu só? falei que era bem simples…

div#width{
	column-width: 15em;
	-moz-column-width: 15em;
	-webkit-column-width: 15em;
}

Demonstração | Mais detalhes

Ah sim, vale lembrar que o valor para <medida> é qualquer valor válido: px, em, %…

Column-count

Sintax: [-moz- | -webkit-]?column-count: <inteiro> | auto

Column-count, define o que column-width tem que calcular, ou seja, quantas colunas irão se encaixar em uma determinada área. A grande diferença é que column-width busca descobrir o número de colunas, enquanto column-count calcula o tamanho das colunas, dividindo de forma proprocional a área disponivel.

Voltando um pouco na matemática, para exemplo, suponhamos que minha área agora tenha 660px e o valor para column-width ainda é 200px. O resultado será o mesmo (3 colunas), mas irá sobrar 60 pixels – porque 60 não é divisível por 200 -, que não serão usados. Agora, que tal deixar de lado o tamanho das colunas e definir o número de colunas? Vejamos o que acontece… Neste exemplo, eu quero que o número de colunas seja 3 (valor de column-count = 3), então o CSS(3) irá calcular:  660/3 = 220. Pegou o jeito do negócio? Caso eu use column-count no lugar de column-width,  as medidas das colunas é que irão variar de acordo com a área disponível.

O valor para column-count, sempre deve ser um inteiro, maior que zero ;).

div#count{
	column-count: 3;
	-moz-column-count: 3;
	-webkit-column-count: 3;
}

Demonstração | Mais detalhes

Columns

É uma mistura de column-width e column-count, no formato shorthand. Por questões de compatibilidade, não recomendo usar por agora este formato (quem sabe em um futuro próximo…). Não há segredo, apenas é feita a definição do valor para as duas propriedades em uma só:

Sintax: [-webkit-]?columns: <colum-width>? | <column-count>?

Você pode definir apenas o valor para column-width, ou apenas o valor para column-count. O valor que não for definido será o padrão (auto).

Vale lembrar que nenhum cálculo é feito, caso o valor de column-width e column-count já estiver definido. O número de colunas serão de acordo com o valor definido, assim como o tamanho das mesmas.

div#short{
	columns: 3 15em;
	-webkit-columns: 3 15em;
}

Demonstração | Mais detalhes

Observação:

• De preferência a declaração separada para cada propriedade. Assim você consegue mais compatibilidade!

Column-gap: O Padding das Colunas

Column-gap é o padding para as colunas… Você irá notar que, declarando somente o número de colunas, ou até mesmo somente o tamanho delas, não é feita nenhuma “separação”, por meio de margin ou até mesmo padding – nenhum se aplica as colunas. Para resolver isto é que foi introduzido a propriedade column-gap. Apessar de parecer um pouco com o padding, seu comportamento se restringe apenas entre as colunas.

Sintax: [-moz- | -webkit-]?column-gap: <tamanho> | normal

Usar column-gap é tão simples quanto definir o padding de um elemento, apenas sete o valor desejado em um formato válido (px, em, %…):

div#gap{
	column-count: 3;
	-moz-column-count: 3;
	-webkit-column-count: 3;

	column-gap: 150px;
	-moz-column-gap: 150px;
	-webkit-column-gap: 150px;
}

Demonstração | Mais detalhes

Observações:

• O valor para <tamanho> não pode ser negativo.
• Não existe “sub-propriedades” para column-gap, como ocorre no padding (padding-top, padding-left…).

Column-rule: Bordas Para as Colunas

Vejamos…, para as colunas ficarem mais estilizadas, seria interressante uma borda entre elas não? Column-rule é quem vai fazer este serviço!

Column-rule, é exatamente uma cópia da propriedade border, e ambas são declaradas no formato shorthand. Enquanto border é a simplificação das propriedades border-color, border-style e border-width, column-rule trabalha com a simplificação das propriedades column-rule-color, column-rule-style, column-rule-width em uma só – column-rule. Não tem muito o que dizer, se você sabe criar uma borda em um elemento, concerteza saberá re-criar esta mesma borda entre as colunas (esta propriedade se aplica apenas entre as colunas, não se confunda…):

Sintax: [-moz- | -webkit-]?column-rule: <column-rule-width> | <column-rule-style> | [ <column-rule-color> | transparent ]

div#rule{
	column-count: 3;
	-moz-column-count: 3;
	-webkit-column-count: 3;

	column-rule: 10px solid #CCC;
	-moz-column-rule: 10px solid #CCC;
	-webkit-column-rule: 10px solid #CCC;
}

Demonstração | Mais detalhes

Observação:

• Segundo a documentação, se a borda (column-rule) e o padding (column-gap) tiverem o mesmo valor, ambos ficaram juntos, exatamente no mesmo espaço. Estranho não?

Column-span

Para tornar a manipulação de elementos nas colunas um pouco mais fácil, também foi introduzido a propriedade column-span, o seu uso é bem interressante… Suponhamos que eu preciso que um determinado elemento (h2), esteja presente em todas as colunas – pense que o h2 é o inicio de um novo artigo, sei lá… Fazer isto com Grid CSS é uma tarefa nada fácil não? Agora observe usando a propriedade column-span:

Sintax: [-webkit-]?column-span: 1 | all

O valor inicial é “1“, que é claro, o elemento estará presente apenas na coluna na qual ele pertence. Alterando o valor para “all“, este mesmo elemento irá estar presente em todas as colunas. Veja o CSS e a demonstração:

div#span{
	column-count: 3;
	-moz-column-count: 3;
	-webkit-column-count: 3;
}
div#span h2{
	background: #EEE;
	column-span: all;
	-webkit-column-span: all;
}

Demonstração | Mais detalhes

Eu pessoalmente espero algumas melhorias para column-span, como por exemplo, setar o número de colunas ao invês de apenas uma ou todas, mas atualmente já dá para fazer “uns estragos”…

Column-fill

Em rápidas palavras, column-fill trata de como o conteúdo das colunas será preenchido. Há duas opções: distribuir o conteúdo de forma balanceada ou não.

Sintax: [-moz- | -webkit-]?column-fill: balance | auto

Por padrão, o conteúdo é distribuido de forma balanceada (balance), fazendo com que cada coluna tenha exatamante o mesmo tamanho – em conteúdo. Alterando este valor para auto, o conteúdo apenas não ficará tão balanceado como ocorre em balance; algumas colunas por exemplo terão diferença de conteúdo, para mais ou para menos:

div#fill{
	column-width: 15em;
	-moz-column-width: 15em;
	-webkit-column-width: 15em;

	column-fill: auto;
	-moz-column-fill: auto;
	-webkit-column-fill: auto;
}

Demonstração | Mais detalhes

Criando Quebra Entre as Colunas

Normalmente a quebra de conteúdo, para a separação entre as colunas é feita pelo User Agent (navegador), e nem sempre terá o resultado que desejamos. Para manipular a quebra de conteúdo entre as colunas, foram introduzidas 3 novas propriedades que veremos agora: break-before, break-after, break-inside.

Como ocorre em column-gap, as propriedades para quebra de colunas, também tem semelhança com as propriedades page-break-before, page-break-after e page-break-inside; os valores são os mesmos. Então nem é preciso comentar que não vou entrar em detalhes aqui, pois estamos falando de CSS3, não CSS2. Se você não tem muito conhecimento sobre as propriedades de québra de página, estude um pouco sobre o assunto antes de prosseguir com a leitura, recomendo este artigo.

A “diferença” é que, agora com o CSS3, há novos valores/definições para estas propriedades. Lembre-se também que o nosso assunto é múltiplas colunas em CSS3, então o uso destas propriedades se refere ao alterar o comportamento das colunas:

Sintax: break-before: auto | always | avoid | left | right | page | column | avoid-page | avoid-column

Sintax: break-after: auto | always | avoid | left | right | page | column | avoid-page | avoid-column

Sintax: break-inside: auto | avoid | avoid-page | avoid-column

Todas as propriedades, tem valor padrão sendo auto. Veja a descrição para cada valor:

Auto – Não força e nem proibe a quebra de página/coluna, depois ou dentro do box gerado.
Always – Sempre força a quebra de página, depois do box gerado.
Avoid – Evita a quebra de página/coluna, depois do box gerado.
Left – Sempre força a quebra de página em uma ou duas páginas, depois do box gerado, para que a próxima página fique à esqueda.
Right – Sempre força a quebra de página em uma ou duas páginas, depois do box gerado, para que a próxima página fique à direita.

Estes são os novos valores, introduzidos em CSS3:
Page – Sempre força a quebra de página, depois do box gerado (Notou a semelhança com o valor always?).
Column – Sempre força a quebra de coluna, depois do box gerado.
Avoid-page – Evita a quebra de página (apenas página), depois ou dentro do box gerado.
Avoid-column – Evita a quebra de coluna (apenas coluna), depois ou dentro do box gerado.

div#after, div#before, div#inside{
	column-count: 3;
	-moz-column-count: 3;
	-webkit-column-count: 3;
}
div#after{
	break-after: page;
}

div#before{
	break-before: column;
}

div#inside{
	break-inside: avoid;
}

Mais detalhes

Em CSS2, estas propriedades não tem muito destaque, mas com CSS3 é possível que ganhem mais espaço nos arquivos CSS, já que manipular as colunas pode, por vezes, se tornar inevitável. De qualquer modo, é importante estar a par dessas propriedades!

Palavras finais…

A vantagem de múltiplas colunas em CSS3 em relação a Grids CSS é muito grande, ainda mais agora que você aprendeu a usar cada propriedade acima ;). Recomendo que pratique o que viu aqui … se perceber alguma observação que não citei, faça um comentário!

Depois leiam este artigo também: CSS3 Multi-Column Thriller.

A Séria Completa

Iniciando com CSS3
Prosseguindo com CSS3 – Bordas e Sombras
Avançando com CSS3 – Trabalhando com Backgrounds
Avançando com CSS3 – Entendendo as Cores
Aprendendo CSS3 – Trabalhando com Textos
Desenvolvendo CSS3 – Propriedades de Interface
Desenvolvendo CSS3 – Propriedades de Interface: Múltiplas Colunas em CSS3

Até a próxima.