Skip to main content
FreeToolkit .ai

Gerador de Colunas CSS Crie layouts de texto em múltiplas colunas com contagem de colunas, espaçamento e estilização de regras personalizáveis.

Gerador de Colunas CSS illustration
🎨

Gerador de Colunas CSS

Crie layouts de texto em múltiplas colunas com contagem de colunas, espaçamento e estilização de regras personalizáveis.

1

Definir contagem de colunas ou largura

Escolha entre o modo de contagem de colunas fixa ou o modo de largura de coluna responsiva.

2

Estilizar regras de colunas

Defina o tamanho do espaçamento e personalize o estilo da linha divisória, largura e cor.

3

Copiar o CSS

Visualize a estrutura de texto em multi-colunas e copie o CSS.

Loading tool...

What Is Gerador de Colunas CSS?

O Gerador de Colunas CSS cria layouts de texto em múltiplas colunas que lembram projetos de jornais ou revistas. O módulo de layout de múltiplas colunas do CSS permite que o conteúdo flua automaticamente por várias colunas, e essa ferramenta oferece controle visual sobre todas as propriedades principais. Você pode escolher entre column-count (número fixo de colunas) ou column-width (colunas responsivas que se ajustam com base na largura do contêiner). A propriedade column-gap controla o espaçamento entre as colunas, e column-rule adiciona uma linha divisória visível entre as colunas com estilo, largura e cor personalizáveis. A pré-visualização mostra suas configurações aplicadas a um texto de exemplo, demonstrando como o conteúdo flui pelas colunas. Essa técnica de layout é excelente para páginas com muito texto, artigos e documentação.

Why Use Gerador de Colunas CSS?

  • Alternar entre os modos column-count e column-width
  • Regra de coluna personalizável com opções de estilo, largura e cor
  • Visualização em tempo real com texto de amostra fluindo
  • Sete opções de estilo de regra, incluindo sólido, tracejado e pontilhado

Common Use Cases

Layouts de Artigos

Crie layouts de artigos em multi-colunas no estilo de jornal para melhor legibilidade.

Páginas de Documentação

Use colunas para glossários, índices e páginas de referência.

Listagens de Cartões

Organize conteúdo em estilo de cartão em um layout de multi-colunas tipo mosaico.

Conteúdo do Rodapé

Organize links e informações do rodapé em colunas organizadas.

Technical Guide

O módulo de múltiplas colunas do CSS usa column-count para especificar o número exato de colunas ou column-width para definir uma largura mínima de coluna (o navegador determina a contagem ótima). A propriedade column-gap define o espaçamento entre as colunas. column-rule é um atalho para column-rule-width, column-rule-style e column-rule-color, adicionando uma linha divisória visível entre as colunas. O conteúdo flui automaticamente de uma coluna para a próxima. Para evitar que os elementos sejam divididos pelas colunas, use break-inside: avoid. A propriedade column-span: all faz com que um elemento abranja todas as colunas (útil para títulos). Os layouts de colunas funcionam bem para conteúdo de texto, mas podem causar problemas com elementos interativos ou imagens. Para designs responsivos, column-width é geralmente preferido em relação a column-count, pois se adapta naturalmente à largura do contêiner.

Tips & Best Practices

  • 1
    Use column-width para layouts responsivos que se adaptam ao tamanho do contêiner
  • 2
    Adicione break-inside: avoid para evitar quebras de conteúdo desconfortáveis
  • 3
    Use column-span: all para títulos que devem abranger todas as colunas
  • 4
    Mantenha a contagem de colunas abaixo de 4 para leitura confortável em telas

Related Tools

Área de Testes do CSS Flexbox - free online tool

Área de Testes do CSS Flexbox

Explorador visual do CSS Flexbox com controles interativos para todas as propriedades do contêiner flexível.

🎨 CSS & Design
Ambiente de Testes do CSS Grid - free online tool

Ambiente de Testes do CSS Grid

Construtor visual de CSS Grid com controles interativos para colunas de modelo, linhas e lacunas.

🎨 CSS & Design
Testador de Design Responsivo - free online tool

Testador de Design Responsivo

Visualize sites na web em pontos de quebra comuns de dispositivos com um visualizador de iframe integrado.

🎨 CSS & Design
Gerador de Escala Tipográfica - free online tool

Gerador de Escala Tipográfica

Gere uma escala tipográfica modular com tamanho base, razão e unidades personalizáveis.

🎨 CSS & Design

Frequently Asked Questions

Q Qual é a diferença entre column-count e column-width?
column-count define um número fixo de colunas. column-width define uma largura mínima e permite que o navegador determine a contagem responsivamente.
Q Posso evitar que o conteúdo seja quebrado entre as colunas?
Sim, use break-inside: avoid nos elementos que não devem ser divididos entre as colunas.
Q O layout de multi-colunas funciona com imagens?
Sim, mas imagens grandes podem causar problemas de layout. Use break-inside: avoid nos contêineres de imagem.
Q Posso fazer com que um elemento abranja todas as colunas?
Sim, use column-span: all em qualquer elemento para fazê-lo abranger a largura total de todas as colunas.
Q O layout de multi-colunas é suportado em todos os navegadores?
Sim, o layout de multi-colunas do CSS é suportado em todos os navegadores modernos.

About This Tool

Gerador de Colunas CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.