Propriedade columns
Última atualização: 2026-09-13
columns Propriedade columns
A propriedade columns é a abreviação de column-count e column-width, dividindo o conteúdo de um elemento em várias colunas automaticamente, de forma semelhante à tipografia de jornal. É frequentemente usada para apresentar textos longos em várias colunas para melhor legibilidade.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
columns: auto | <integer> || auto | <length>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | Palavra-chave | Calcula o número de colunas automaticamente. |
<integer> | Tipo | Um número fixo de colunas. |
<length> | Tipo | Uma largura de coluna fixa. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| columns | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： columns é a abreviação de column-count e column-width; se apenas um valor for escrito, o navegador infere pelo tipo se é um número de colunas ou uma largura de coluna.
Aviso： Layouts de várias colunas precisam de uma altura definida ou conteúdo suficiente para mostrar a divisão em colunas; caso contrário, o conteúdo pode ainda ser renderizado em uma única coluna.
❓ Perguntas Frequentes
QQual é a diferença entre columns e Flexbox para layouts de várias colunas?
Acolumns, o CSS Multi-column Layout, permite que o conteúdo flua automaticamente de uma coluna para a próxima, como um jornal; um único bloco de texto é dividido entre colunas enquanto a ordem de leitura permanece contínua. O Flexbox, por outro lado, faz de cada filho uma coluna própria, sem fluxo de conteúdo entre eles. Use columns para texto fluido e flex para dispor elementos filhos separados lado a lado.
QComo faço um título abranger todas as colunas?
ADefina column-span:all no título, e ele se estende por todas as colunas enquanto o texto do corpo permanece dividido abaixo. Essa é a estrutura mais comum para artigos de várias colunas: um título de largura total mais o texto do corpo em colunas. Observe que column-span aceita apenas none e all, então você não pode abranger um número específico de colunas, e o título deve ser um filho direto do contêiner de várias colunas.
QComo devo entender a abreviação columns?
Acolumns é a abreviação de column-count e column-width. Com um único valor, o navegador infere o significado pelo tipo: um inteiro como columns:3 é um número de colunas, e um comprimento como columns:200px é uma largura de coluna. Ambos podem ser dados juntos, por exemplo columns: 200px 3 significa colunas de cerca de 200px com no máximo 3 delas, uma configuração completa de várias colunas em uma linha.
QQual é o suporte dos navegadores para layouts de várias colunas?
ANavegadores modernos suportam bem columns, column-count, column-gap e column-rule; Chrome, Edge, Firefox e Safari os cobrem. column-span:all precisa de versões mais novas, e em navegadores antigos o layout volta para uma única coluna enquanto o conteúdo permanece completo. Isso torna o multi-column um aprimoramento progressivo seguro que você pode usar sem preocupações, já que o pior caso é uma fallback de coluna única legível em vez de uma página quebrada.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
