Propriedade CSS column-count

A propriedade column-count especifica o número de colunas em que o conteúdo de um elemento será dividido. Ela faz parte do módulo de layout multi-coluna do CSS, que permite que um único bloco de conteúdo flua por várias colunas automaticamente — como em um jornal ou revista — sem que seja necessário dividir o markup manualmente.

Esta página aborda o que column-count faz, sua sintaxe e os valores aceitos, exemplos executáveis, como ela funciona em conjunto com as outras propriedades de coluna e os pontos de atenção a observar.

O que `column-count` faz

column-count aceita um número inteiro positivo ou a palavra-chave auto. auto é o valor padrão.

Quando definida com um valor numérico (por exemplo 3), o navegador tenta dividir o conteúdo em exatamente esse número de colunas de largura igual.
Quando definida como auto, o número de colunas é determinado por outras propriedades — mais importante, column-width. Se nem column-count nem column-width estiver definida, o conteúdo é renderizado como uma única coluna.

Se você definir ambas column-count e column-width, column-count age como um máximo: o navegador encaixa o maior número possível de colunas com pelo menos column-width de largura, mas nunca mais do que column-count. Essa combinação é o padrão responsivo recomendado, e o atalho columns define ambas ao mesmo tempo.

Quando eu usaria isso?

O layout multi-coluna se destaca em longos trechos de texto contínuo, em ordem de leitura — artigos, páginas de termos de serviço, listas de links — onde se deseja que o conteúdo preencha a largura disponível em colunas equilibradas. Ele não é uma grade de uso geral: para layouts de página bidimensionais, use CSS Grid ou Flexbox.

Valor Inicial	auto
Aplica-se a	Contêineres de bloco, exceto caixas de wrapper de tabela.
Herdado	Não.
Animável	Sim. O número de colunas é animável.
Versão	CSS3
Sintaxe DOM	object.style.columnCount = "4";

Sintaxe

Sintaxe da propriedade column-count

column-count: <integer> | auto | initial | inherit;

Exemplo da propriedade column-count:

Exemplo da propriedade CSS column-count com valor auto

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: auto;
      }
    </style>
  </head>
  <body>
    <h2>Column-count property example</h2>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo da propriedade column-count com um valor numérico:

Exemplo da propriedade CSS column-count com valor numérico

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-count: 7;
      }
    </style>
  </head>
  <body>
    <h2>Column-count property example</h2>
    <div>
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a great fact that a reader will be distracted by the readable content of a page when looking at its layout.
    </div>
  </body>
</html>

Experimente Você Mesmo »

Com column-count: 7, o navegador divide o mesmo parágrafo em sete colunas. Se o contêiner for estreito demais para dar a cada coluna uma largura utilizável, as colunas ficam muito finas — o que é exatamente o motivo pelo qual combinar column-count com column-width (ou o atalho columns) costuma ser uma escolha melhor do que um número fixo.

Trabalhando com as outras propriedades de coluna

column-count raramente é usada sozinha. Estas propriedades complementares moldam as colunas resultantes:

Propriedade	O que controla
`column-width`	A largura ideal de cada coluna. Combinada com `column-count`, limita o número de colunas a um máximo.
`column-gap`	O espaço entre as colunas.
`column-rule`	Uma linha desenhada entre as colunas (como um `border`, mas no espaçamento).
`columns`	Atalho para definir `column-width` e `column-count` juntos.
`column-span`	Permite que um elemento (como um cabeçalho) se estenda por todas as colunas.
`column-fill`	Se o conteúdo é distribuído de forma equilibrada entre as colunas ou preenche cada coluna em sequência.

Uma receita comum e robusta é definir uma largura-alvo e um número máximo de colunas ao mesmo tempo:

.article {
  column-width: 14rem;   /* aim for ~14rem-wide columns */
  column-count: 3;       /* but never more than 3 */
  column-gap: 2rem;
}

Pontos de atenção

Somente números inteiros. column-count não aceita frações ou unidades — 2.5 e 200px são inválidos. Use column-width quando quiser pensar em larguras.
É um máximo, não uma garantia. Quando column-width também está definida, o navegador pode renderizar menos colunas do que column-count se não houver espaço suficiente.
O conteúdo pode ser cortado entre colunas. Use a propriedade break-inside (break-inside: avoid) para evitar que elementos como figuras ou itens de lista sejam divididos em uma fronteira de coluna.
Animável, mas raramente animado. O valor pode ser transicionado, mas refluir o texto em um número diferente de colunas é visualmente perturbador, por isso raramente é usado em animações.

A propriedade column-count é suportada por todos os navegadores modernos. O Internet Explorer 10–11 e versões mais antigas do Safari exigiam os prefixos -ms- / -webkit-; hoje a propriedade sem prefixo é segura de usar.

Valores

Valor	Descrição	Experimente
auto	O número de colunas é determinado por outras propriedades. Este é o valor padrão da propriedade.	Experimente »
`<integer>`	Especifica o número exato de colunas em que o conteúdo deve fluir.	Experimente »
initial	Define a propriedade com seu valor padrão.	Experimente »
inherit	Herda a propriedade de seu elemento pai.

Prática

O que a propriedade CSS 'column-count' faz?

Define o número de colunas em um layout multi-coluna.Define o espaço entre as colunas do layout.Define a cor das colunas do layout.Define a largura das colunas do layout.Controla como o conteúdo transborda do seu contêiner.

O que column-count faz