Propriedade CSS column-width

A propriedade CSS column-width define a largura ideal de cada coluna em um layout de múltiplas colunas. Em vez de informar ao navegador quantas colunas criar, você indica a largura que cada coluna deve ter, e o navegador calcula quantas colunas cabem no espaço disponível.

Esta é a abordagem oposta à de column-count, onde você fixa o número de colunas e deixa a largura variar. O column-width é o que torna o texto de múltiplas colunas responsivo por padrão: conforme o contêiner fica mais largo, mais colunas aparecem; conforme fica mais estreito, as colunas vão desaparecendo até restar uma única coluna.

A propriedade column-width é uma das propriedades CSS3.

Como o column-width funciona

O valor é melhor entendido como uma largura mínima desejada, não uma obrigatória. O navegador encaixa quantas colunas (de pelo menos aquela largura) couberem, e depois as expande para preencher o espaço restante.

Se o contêiner comportar várias colunas da largura especificada, você obterá várias colunas.
Se o contêiner for mais estreito que o valor especificado, você obterá uma única coluna tão larga quanto o contêiner — a largura nunca ultrapassa a caixa.
Quando column-count também está definido, column-width torna-se uma largura máxima: o navegador usa a restrição que produzir menos colunas. O atalho para definir ambos ao mesmo tempo é columns.

Uma forma aproximada de prever o resultado: número de colunas ≈ floor(largura do contêiner / (column-width + column-gap)). O valor padrão de column-gap é 1em.

Quando usar

Use column-width quando quiser comprimentos de linha legíveis que se adaptem ao viewport — por exemplo, para distribuir um artigo longo ou uma lista de itens curtos em colunas estilo jornal sem escrever media queries. Como a contagem de colunas se ajusta automaticamente, a mesma regra funciona em um celular (uma coluna) e em um monitor largo (três ou quatro colunas).

Informação

Os navegadores modernos suportam column-width sem prefixos de fornecedor. O valor padrão auto significa que a largura da coluna é determinada por outras propriedades, como column-count, ou retorna a uma única coluna se nenhuma outra restrição for aplicada.

Valor Inicial	auto
Aplica-se a	Contêineres de bloco, exceto caixas wrapper de tabela.
Herdado	Não.
Animável	Sim.
Versão	CSS3
Sintaxe DOM	object.style.columnWidth = "5px";

Sintaxe

Sintaxe da propriedade CSS column-width

column-width: auto | length | initial | inherit;

Exemplo da propriedade column-width:

Exemplo da propriedade CSS column-width com a propriedade length

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-width: 80px;
      }
    </style>
  </head>
  <body>
    <h1>Column-width property example</h1>
    <p>Here the width of the column is set to 80px.</p>
    <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

![Propriedade CSS column-width](https://api.w3docs.com/uploads/media/default/0001/03/5dc2724355e1e0cd7af891102d3b3d2c9e042376.png "CSS column-width Property" =420x)

Exemplo da propriedade column-width com o valor "auto":

Com auto, o navegador não impõe uma largura-alvo. Combinado com column-count, deixa a regra de contagem decidir o layout; sozinho, retorna a uma única coluna.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        column-width: auto;
      }
    </style>
  </head>
  <body>
    <h1>Column-width property example</h1>
    <p>Here the width of the column is set to auto.</p>
    <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 »

Colunas responsivas sem media queries

Como o navegador deriva a contagem de colunas da largura disponível, uma única regra column-width produz um layout que se reorganiza sozinho. Aqui também adicionamos um column-gap e um column-rule para separação. Redimensione a pré-visualização para ver as colunas aparecerem e desaparecerem.

<!DOCTYPE html>
<html>
  <head>
    <title>Responsive columns</title>
    <style>
      .news {
        column-width: 14em;
        column-gap: 2em;
        column-rule: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div class="news">
      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.
    </div>
  </body>
</html>

Problemas comuns

É um alvo, não uma garantia. A largura real renderizada da coluna raramente é exatamente o valor definido — o navegador expande as colunas para preencher a linha. Use-o para controlar aproximadamente quantas colunas aparecem, não sua largura pixel-perfect.
column-width e column-count interagem. Quando ambos estão presentes, o navegador trata column-width como máximo e nunca excede column-count. Defina apenas um, a menos que queira intencionalmente um limite em ambos os eixos.
Conteúdo alto pode quebrar colunas de forma desigual. Use column-fill para controlar como o conteúdo é distribuído entre as colunas.
Porcentagens não são permitidas. Ao contrário de muitas propriedades de largura, column-width aceita apenas um comprimento (px, em, ch, …) ou auto — não %.

Valores

Valor	Descrição	Experimente
auto	A largura da coluna é especificada pelo navegador. Este é o valor padrão.
length	A largura das colunas é especificada por comprimento.
initial	Define a propriedade com seu valor padrão.
inherit	Herda a propriedade de seu elemento pai.

Propriedades relacionadas

column-count — fixa o número de colunas em vez de sua largura.
columns — atalho para column-width e column-count.
column-gap — espaço entre as colunas.
column-rule — uma linha desenhada entre as colunas.
column-span — permite que um elemento se estenda por todas as colunas.

Prática

O que a propriedade 'column-width' no CSS faz?

A propriedade 'column-width' especifica a largura da coluna em um layout de múltiplas colunas.A propriedade 'column-width' especifica o número de colunas em um layout.A propriedade 'column-width' especifica a largura da janela do navegador.A propriedade 'column-width' pode aceitar valores em 'px', 'em', 'rem' ou uma porcentagem.A propriedade 'column-width' especifica a largura preferida para as colunas.