CSS Columns

O que é CSS Columns , e como usar ?

CSS Columns é um módulo de CSS que define um layout de várias colunas, permitindo expressar como o conteúdo deve fluir entre colunas e como as lacunas e regras são tratadas.

Com o controle de colunas no CSS, podemos definir colunas de texto de forma automática. Até hoje não havia maneira de fazer isso de maneira inteligente com CSS e o grupo de propriedades columns

O número de colunas será o número mínimo de colunas necessárias para mostrar todo o conteúdo em todo o elemento. a largura da coluna é uma propriedade flexível.

Pense na largura da coluna como uma sugestão de largura mínima para o navegador. se o navegador não possa encaixar pelo menos duas colunas na largura especificada, as colunas param e cairão em uma única coluna.

column-count

A propriedade column-count define a quantidade de colunas terá o bloco de textos.

/* Define a quantidade de colunas*/
-moz-column-count: 3;
-webkit-column-count: 3;

column-width

Com a propriedade column-width podemos definir a largura das colunas.

Veja o exemplo que eu vou destacar abaixo.

Define qual a largura mínima para as colunas. Se as colunas forem expremidas, fazendo com que a largura delas fique menor que este valor, elas se transformam em 1 coluna automaticamente

-moz-column-width: 300px; 
-webkit-column-width: 300px; 

column-gap

A propriedade column-gap cria um espaço entre as colunas, um gap

Define o espaço entre as colunas.

-moz-column-gap: 50px;
-webkit-column-gap: 50px;

Com apenas algumas regras de CSS, você pode criar um layout inspirado em impressão que tenha a flexibilidade da web.

Veja na prática

Vamos adicionar o HTMl

 <div class="texto">

  <p>
     Criar animações para nossos websites era algo “impensável” no passado. Com o surgimento do CSS3 e a morte do flash, a criação de websites dinâmicos, 
     animados e leves, foi ficando cada vez mais fácil. Quem diria que há 7 anos atrás poderíamos alterar nossas animações para web sem precisar 
     ter o flash instalado na nossa máquina ou até mesmo criar sites com efeitos paralax? Os devs antigos sabem bem o que estou querendo dizer.
     
  </p>
     
  <p>
     Assim como o HTML5, o CSS3 também veio com várias novidades interessantes e revolucionárias… Entre elas temos a propriedade animation. 
     Com esta riquíssima propriedade, podemos produzir transições apenas com CSS. Mas isso você já sabe. Mesmo assim, 
     
     a propriedade animation e também o método keyframe podem ser ruins de gerenciar quando temos muita animação em um mesmo site. 
     Ai, se houver um framework que ajude esse trabalho, nossa vida se torna mais fácil. É aí que entra o All Animation CSS3.
  </p>
  
    <p>
     Assim como o HTML5, o CSS3 também veio com várias novidades interessantes e revolucionárias… Entre elas temos a propriedade animation. 
     Com esta riquíssima propriedade, podemos produzir transições apenas com CSS. Mas isso você já sabe. Mesmo assim, 
     
     a propriedade animation e também o método keyframe podem ser ruins de gerenciar quando temos muita animação em um mesmo site. 
     Ai, se houver um framework que ajude esse trabalho, nossa vida se torna mais fácil. É aí que entra o All Animation CSS3.
  </p>

 </div>

Vamos Adicionar o Css:

.texto{

     padding:20px; 
     background-color:#ffffff;

     column-count:3;
     column-gap:50px; /*Espaço de 50 px Nas Colunas*/
     column-rule:1px solid #d5d5d5; /*como se fosse uma borda mais não é uma borda Nas Colunas*/
     column-width:300px; /*um largura minima Nas Colunas*/

     
     -webkit-column-count:3;
     -webkit-column-gap:50px; /*Espaço de 50 px Nas Colunas*/
     -webkit-column-rule:1px solid #d5d5d5; /*como se fosse uma borda mais não é uma borda Nas Colunas*/
     -moz-column-width:300px; /*um largura minima Nas Colunas*/
     
     -moz-column-count:3;
     -moz-column-gap:50px; /*Espaço de 50 px Nas Colunas*/
     -moz-column-rule:1px solid #d5d5d5; /*como se fosse uma borda mais não é uma borda Nas Colunas*/
     -moz-column-width:300px; /*um largura minima Nas Colunas*/
     
     }
        
p { 

    color:#939393; 
    font-size:1em; 
    margin-bottom:20px; 
    font-family:'open_sanslight'; 
}

Veja o Resultado abaixo:

Baixar Código Veja Funcionando