Propriedade CSS columns

A propriedade CSS columns é um atalho que distribui o conteúdo de um único elemento em múltiplas colunas, como um jornal. Ela define duas propriedades longas de uma vez:

column-count — o número máximo de colunas.
column-width — a largura mínima que cada coluna deve ter (é uma largura sugerida, não fixa).

Em vez de escrever as duas linhas:

.example {
  column-width: 100px;
  column-count: 3;
}

você escreve apenas uma:

.example {
  columns: 100px 3;
}

Os dois valores podem aparecer em qualquer ordem, pois um é um comprimento e o outro um inteiro, então o navegador consegue distingui-los. Você também pode fornecer apenas um deles e deixar o outro com o valor padrão auto.

Por que usar `columns`?

O layout multi-coluna é ideal para longos blocos de texto — artigos, definições, nuvens de tags — onde você quer que o leitor percorra linhas mais curtas. Ao contrário do Flexbox ou CSS Grid, você não divide o markup em caixas separadas; o navegador distribui um bloco de conteúdo pelas colunas e o reflui conforme o contêiner é redimensionado.

Como os dois valores interagem

Os valores descrevem um alvo, e o navegador escolhe o melhor ajuste:

column-width é tratado como mínimo. O navegador encaixa o máximo de colunas com pelo menos essa largura que o contêiner permitir.
column-count limita esse número. O navegador nunca cria mais colunas do que esse valor, mesmo que caibam mais.

Portanto, columns: 100px 3 significa: "crie colunas com pelo menos 100px de largura, mas nunca mais de 3." Em um contêiner largo você obtém 3 colunas; conforme o contêiner fica mais estreito, a contagem cai para 2 e depois para 1, mantendo cada coluna ≥ 100px. Isso é o que torna o layout responsivo sem media queries.

Informação

Se a largura e a contagem solicitadas não couberem ao mesmo tempo no elemento, o navegador prioriza a largura e reduz a contagem de colunas para respeitá-la.

A propriedade columns é uma das propriedades CSS3. Para espaçar e separar as colunas geradas, use-a junto com column-gap e column-rule; para permitir que um cabeçalho se estenda por todas as colunas, use column-span.

Valor inicial	auto auto
Aplica-se a	Contêineres de bloco, exceto caixas envoltórias de tabela.
Herdado	Não.
Animável	Sim. Apenas `column-width` é animável.
Versão	CSS3
Sintaxe DOM	object.style.columns = "100px 2";

Sintaxe

Sintaxe da propriedade CSS columns

columns: [ <'column-width'> || <'column-count'> ] | auto | initial | inherit;

Exemplo da propriedade columns:

Exemplo da propriedade CSS columns com as propriedades column-width e column-count

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        columns: 100px 3;
      }
    </style>
  </head>
  <body>
    <h2>Columns property example</h2>
    <div class="example">
      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

No próximo exemplo, cada coluna tem pelo menos 50px de largura e o número de colunas é limitado a 5. Como as colunas são estreitas, o navegador pode encaixar até todas as 5 em um contêiner largo — e menos conforme ele diminui:

Exemplo com largura menor e limite de colunas maior

Exemplo da propriedade CSS columns com column-width e column-count como valores

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        columns: 50px 5;
      }
    </style>
  </head>
  <body>
    <h2>Columns property example</h2>
    <div class="example">
      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 »

Valores

Valor	Descrição
`auto`	Tanto `column-width` quanto `column-count` são definidos como `auto`. Este é o padrão.
`<length>`	Define a largura mínima das colunas.
`<integer>`	Define o número máximo de colunas.
`initial`	Define a propriedade com seu valor padrão.
`inherit`	Herda a propriedade do elemento pai.

Problemas comuns

É uma sugestão, não uma ordem. column-width é um mínimo, portanto a largura renderizada quase sempre é maior do que o valor fornecido. Para fixar uma largura exata, você também precisa controlar o tamanho do contêiner.
As colunas são equilibradas, não preenchidas de cima para baixo. Por padrão, o navegador tenta deixar todas as colunas com aproximadamente a mesma altura, em vez de preencher a primeira antes de começar a próxima.
Atenção às quebras. Palavras longas ou elementos não quebráveis podem ultrapassar os limites de uma coluna estreita; break-inside: avoid ajuda a manter itens como cartões intactos.
Apenas column-width é animável. A contagem de colunas salta entre inteiros, portanto as transições nela não são suaves.

Prática

Na abreviação 'columns: 100px 3', o que significam os dois valores?

Largura mínima da coluna e número máximo de colunasLargura máxima da coluna e número mínimo de colunasEspaçamento entre colunas e largura da linha divisóriaAltura da linha e número de linhas

Por que usar columns?