Como usar colunas CSS3

Com a crescente diversidade nos tamanhos dos monitores, não é prático criar blocos únicos de texto que ocupem toda a largura da tela. A solução tradicional é dividir o texto em colunas manualmente, o que exige muito tempo; ou dividir texto dinamicamente com JavaScript, que não funciona universalmente. Além disso, este é um problema de apresentação, devemos ser capazes de estilo com CSS sem o uso de sistemas de grade ou carros alegóricos não deveríamos?

CSS3 realmente fornece uma maneira de você estilizar seu texto em várias colunas, ele ainda dá a capacidade de definir uma medianiz - o espaço entre essas colunas - desta forma você tem controle total ao invés do framework ou sistema de grade configurando essas lacunas para você .

O melhor de tudo, CSS3 degrada graciosamente, então se alguém está navegando no Netscape Navigator, seu site não vai quebrar.

Suporte de Navegador

É importante notar que, embora todos os navegadores atuais suportem várias colunas no CSS3 - sim, até mesmo o IE10 - muitas versões recentes - o IE9, por exemplo - não o fazem. Mesmo que o suporte seja bom, você deve incluir os prefixos de navegador para o webkit (-webkit-) e o mozilla (-moz-). Não há necessidade de incluir -ms- ou -o- para o IE e o Opera, pois eles suportam o recurso integralmente ou não o suportam.

As propriedades

Esse recurso de CSS realmente oferece várias propriedades para que você tenha controle total sobre como seu conteúdo é impresso no navegador e essas propriedades são:

• contagem de colunas: aqui você especifica o número de colunas que deseja aplicar ao elemento.
• largura da coluna: a largura de uma única coluna. Esteja ciente de que esse valor provavelmente será alterado pelo navegador.
• Coluna-gap: a largura do intervalo entre as colunas.
• column-rule-width: a parte da regra é uma espécie de borda para suas colunas e aqui você especifica a largura dessa borda.
• column-rule-style: também como a borda, se você precisar especificar o estilo.
• column-rule-color: aqui a cor da regra.
• column-span: o valor aqui dirá ao navegador quantas colunas você deseja que um elemento abranja, isso é bom para cabeçalhos e funciona como colspan e rowspan em tabelas.

Com todas essas propriedades, acho que não precisamos de mais nada para ter controle total sobre nossas colunas. É claro que nem todas essas propriedades são necessárias para que o layout de várias colunas funcione. Na verdade, apenas a contagem de colunas é necessária, mas você também deve usar a lacuna de coluna para dar um pouco de espaço ao texto e não ter todas as colunas topo um do outro.

Para colocar isso em prática, são necessárias apenas duas linhas de código:

/* This will produce a 3 column layout with a gap of 20px between each column */.cols3 {column-count: 3;column-gap: 20px;}

Se você também deseja aplicar uma regra às colunas, basta adicionar as propriedades extras:

/* This will produce a 3 column layout and a gap of 20px between each column and a rule of 1px solid black */.cols3 {column-count: 3;column-gap: 20px;column-rule-width: 1px;column-rule-style: solid;column-rule-color: #000;}

Como a propriedade de borda mais comum, você também pode empilhar a cor, o estilo e a largura na mesma linha, assim:

.cols3 {column-count: 3;column-gap: 20px;column-rule: 1px solid #000;}

Se você tiver um cabeçalho e quiser que o cabeçalho abranja todas as colunas, basta adicionar uma linha:

/*This h1 will take up the space of the 3 columns*/.cols3 h1{column-span: all;}

Demonstração

Você pode aplicar isso a praticamente qualquer HTML, de um único parágrafo a vários