Propriedade column-count

A propriedade column-count define um número recomendado de colunas em texto multicoluna. O número real pode diferir do especificado, dependendo da largura da coluna e do tamanho do intervalo entre elas.

Sintaxe

cssseletor {
  column-count: número | auto;
}

Valores

Valor	Descrição
número	Define o número especificado de colunas. Mais precisamente, recomenda ao navegador usar esse número de colunas, já que o número real pode diferir do especificado, dependendo da largura da coluna e do tamanho do intervalo entre elas.
`auto`	O navegador define o número ideal de colunas automaticamente.

Valor padrão: auto.

Exemplo

Neste exemplo, o texto será dividido em 3 colunas (claro, em navegadores que suportam multicolunas; nos demais, será apenas texto comum em uma única coluna):

html<div id="elem">
  some long text
</div>

css#elem {
  column-count: 3;
  text-align: justify;
}

Результат:

Exemplo . Valor auto

Neste exemplo, a largura da coluna column-width está definida como 150px, e seu número column-count está definido como auto - o navegador irá definir automaticamente o número necessário de colunas e o intervalo entre elas:

html<div id="elem">
  some long text
</div>

css#elem {
  column-count: auto;
  column-width: 150px;
  text-align: justify;
}

Результат:

Veja também

a propriedade column-width,
que define a largura da coluna
a propriedade column-gap,
que define o intervalo entre colunas
a propriedade column-rule,
que define a borda entre colunas
a propriedade column-span,
que define o número de colunas que um elemento deve ocupar
a propriedade columns,
que é uma propriedade abreviada para multicolunas