Várias colunas - CSS-Tricks | Partes de codigo 2025

Aqui está um exemplo de uma classe simples de três colunas:

.three-col ( -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; )

Dos quais você aplicaria a um bloco de texto assim:


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Exemplo

Pellentesque habitant morbi tristique senectus et netus et maleuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre. Ultricies eneanas mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim em turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Observe que a altura de cada coluna é balanceada automaticamente, de acordo com as especificações.

Observe também que este código de demonstração e amostra está usando prefixos moz e webkit vendor, só deve funcionar nos navegadores Gecko (Firefox 1.5+, et al.) E Webkit (Safari 3+, Chrome, et al.). Pelo que sei, ainda não há suporte nativo no Internet Explorer ou Opera.

Todas as propriedades relacionadas

.three-col ( -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap : 20px; -moz-column-rule-color: #ccc; -moz-column-rule-style: solid; -moz-column-rule-width: 1px; -webkit-column-rule-color: #ccc; -webkit-column-rule-style: solid ; -webkit-column-rule-width: 1px; )

Você também pode definir o column-width(com prefixos), mas geralmente faz mais sentido deixá-lo calcular isso automaticamente.

A regra (“regra”, como em uma linha) dividirá a lacuna ao meio. Você pode usar os mesmos valores que usaria a border.

Tome cuidado para não ter seus blocos de texto tão altos a ponto de serem mais altos do que a janela do navegador (bem pequena), caso contrário, será o mesmo problema do texto ser mais largo do que a janela do navegador (rolar para frente e para trás para ler = uma porcaria). Considere tambémtext-align: justify;