Propriedade column-count
Última atualização: 2026-09-13
column-count Propriedade column-count
A propriedade column-count especifica o número de colunas em que o conteúdo de um elemento é dividido. Parte do CSS Multi-column Layout, é normalmente combinada com column-gap e column-rule para produzir tipografia de várias colunas estilo jornal.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
column-count: auto | <integer>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | Palavra-chave | Calculado automaticamente. |
<integer> | Tipo | Um número fixo de colunas. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| column-count | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： Quando column-count e column-width são definidos juntos, column-count atua como o máximo; o número real de colunas pode ser menor.
Aviso： Colunas em excesso deixam cada uma muito estreita para uma leitura confortável. Defina a quantidade de acordo com o comprimento do conteúdo e a largura do contêiner; normalmente 2 a 4 colunas é apropriado.
❓ Perguntas Frequentes
QQual tem prioridade: column-count ou column-width?
AQuando ambas são definidas, column-count atua como teto: o navegador descobre quantas colunas cabem na column-width dada e limita o resultado em column-count. Por exemplo, column-width:200px; column-count:3 produz 3 colunas em um contêiner de 700px, mas apenas 2 em um de 450px; ele nunca força uma coluna extra. Em resumo, column-width dirige o layout e column-count o limita.
QPor que column-count:3 não surte efeito?
APossíveis motivos: primeiro, conteúdo insuficiente, pois quando o conteúdo é muito curto o navegador mostra apenas o número de colunas necessário; segundo, a altura ou largura do contêiner está restrita e não comporta 3 colunas; terceiro, column-width também está definida e restringe a contagem para menos; quarto, um navegador antigo sem suporte. O multi-column é dirigido pelo conteúdo: a contagem é uma meta, não uma garantia rígida, e mais conteúdo preenche as colunas.
QO que significa column-count:auto?
Aauto significa que o número de colunas não é decidido por esta propriedade; fica a cargo de column-width ou do navegador. Se column-width for definida, a contagem deriva dela automaticamente; se nenhuma for definida, o conteúdo permanece em uma única coluna. auto é o valor padrão, então column-count:auto sozinho não tem efeito visível; combine-a com column-width para habilitar o fluxo automático de colunas.
QComo controlo o espaço entre colunas?
AUse column-gap para o espaçamento, por exemplo column-gap:24px, e column-rule para um divisor entre colunas, por exemplo column-rule:1px solid #ccc. Ambos se aplicam apenas a contêineres de várias colunas. Recomenda-se uma folga de 24px a 40px, ou 1.5em a 2em; muito pequena dificulta distinguir colunas adjacentes, e muito grande desperdiça espaço e interrompe a linha de leitura, então ajuste-a conforme o tamanho real da fonte.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
columns (Abreviação de várias colunas)
A abreviação de column-count e column-width.
column-width
Define a largura da coluna.
