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! 🙂
