6XC

Gerador de Colunas CSS

Distribua o texto em colunas estilo jornal — número, espaçamento e linha divisória — com pré-visualização em tempo real e CSS.

790 visualizações

O layout multi-coluna faz o texto longo fluir lado a lado como em uma página de jornal. Mude o número e o espaçamento e veja este texto de exemplo se reorganizar instantaneamente. Ative a linha para desenhar um fino divisor entre as colunas. Em artigos longos, ela encurta o comprimento das linhas, o que facilita a leitura. O layout multi-coluna faz o texto longo fluir lado a lado como em uma página de jornal. Mude o número e o espaçamento e veja este texto de exemplo se reorganizar instantaneamente. Ative a linha para desenhar um fino divisor entre as colunas. Em artigos longos, ela encurta o comprimento das linhas, o que facilita a leitura.

Layout Multi-Coluna em CSS

column-count divide o conteúdo de um bloco em colunas iguais no estilo jornal; column-gap define o espaçamento entre elas e column-rule desenha uma linha divisória (mesma sintaxe do border). O texto flui automaticamente de uma coluna para a próxima — ideal para artigos longos, rodapés e listas de índice. Use break-inside: avoid nos elementos que você não quer que sejam divididos entre colunas.

Perguntas Frequentes

column-count ou column-width?

column-count fixa quantas colunas você terá; column-width deixa o navegador encaixar quantas colunas de pelo menos essa largura forem possíveis — melhor para layouts responsivos. Você pode usar os dois juntos.

Como evito que um elemento seja dividido entre colunas?

Aplique break-inside: avoid; — útil para cards, imagens com legenda e itens de lista.

Ferramentas Semelhantes

Gerador de Gradiente CSS Crie gradientes CSS lineares, radiais e cônicos com pré-visualização ao vivo e copie o código. Gerar Gerador de Sombra CSS (Box Shadow) Desenhe uma box-shadow visualmente — deslocamentos, desfoque, expansão, cor, opacidade e inset — com pré-visualização em tempo real. Gerar Gerador de Border Radius CSS Arredonde cada canto individualmente ou todos de uma vez, em px ou %, com pré-visualização ao vivo e CSS copiável. Gerar Gerador de Sombra de Texto CSS Crie um text-shadow com deslocamentos, desfoque, cor e opacidade — pré-visualização ao vivo em texto de exemplo. Gerar