Propriedade column-width

A propriedade column-width define a largura das colunas em texto multicoluna. O valor da propriedade pode ser qualquer unidade de tamanho, exceto porcentagens, ou a palavra-chave auto (padrão). Com o valor auto, o navegador determina automaticamente a largura ideal das colunas com base em column-count e column-gap.

Sintaxe

seletor {
	column-width: valor;
}

Exemplo . Largura especificada

Neste exemplo, a largura da coluna column-width foi definida como 150px, e sua quantidade column-count está como auto. Como resultado, a largura das colunas será 150px, e a quantidade de colunas e o espaçamento entre elas serão determinados automaticamente pelo navegador:

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

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

Exemplo . Valor auto

Neste exemplo, o texto será dividido em 3 colunas (porque column-count está definido como 3), e sua largura será calculada automaticamente:

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

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

Veja também

a propriedade column-count,
que define o número de colunas
a propriedade column-gap,
que define o espaçamento entre colunas
a propriedade column-rule,
que define uma linha entre colunas
a propriedade column-span,
que define quantas colunas um elemento deve ocupar
a propriedade columns,
que é uma propriedade abreviada para formatação multicoluna