Múltiplas colunas em html com CSS3

0

Veja como criar multiplas colunas em HTML utilizando CSS3 ( css3 columns )

Olá Pessoal!

Hoje irei falar de um assunto simples, rápido e útil. Recentemente precisei criar colunas em um texto que seria de tamanho dinâmico e deveria se enquadrar corretamente no layout porém com quebra de colunas.

Encontrei estas 3 propriedades muito úteis aqui no CSS3:

 

Propriedade IE Chrome Firefox Safari Opera
column-count 10.0 4.0 -webkit- 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-gap 10.0 4.0 -webkit- 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule 10.0 4.0 -webkit- 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1

Você pode utilizer estas colunas para os seguintes casos:

  • column-count define a quantidade de colunas seu texto irá ter.
  • column-gap define o espaçamento entre as colunas.
  • column-rule define o estilo ou borda que cada coluna irá receber.

Veja mais detalhes aqui: Columns CSS3

Um abraço a todos! 🙂

 

Compartilhe.

Sobre o autor

Criador do blog Código Simples e com mais 9 anos de experiência em TI, com títulos de MVP Microsoft na área de Visual Studio Development, Neo4j Top 50 Certificate, Scrum Master e MongoDB Evangelist. Atuando em funções analista, desenvolvedor, arquiteto, líder técnico e gestor de equipes. Mais informações em : http://jhonathansoares.com