Propriedade column-width
Última atualização: 2026-09-13
column-width Propriedade column-width
A propriedade column-width especifica a largura ideal de cada coluna em um layout de várias colunas. O navegador deriva o número real de colunas da largura do contêiner e desse valor, com o conteúdo fluindo para as colunas de forma adaptável; é uma boa opção para tipografia flexível de várias colunas.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
column-width: auto | <length>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | Palavra-chave | Calculado automaticamente. |
<length> | Tipo | Uma largura de coluna fixa. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| column-width | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： column-width é um valor ideal; a largura real pode ajustar levemente, e o número de colunas cresce ou diminui conforme a largura do contêiner muda.
Aviso： Quando column-width e column-count são definidos juntos, column-count atua como o máximo; a contagem real é a menor dos dois resultados computados.
❓ Perguntas Frequentes
QQual é a diferença entre column-width e width?
Awidth define a própria largura do elemento, o tamanho de sua caixa externa. column-width define a largura ideal de cada coluna dentro de um layout de várias colunas; o navegador calcula o número de colunas a partir da largura do contêiner e desse valor, então a contagem muda conforme o contêiner é redimensionado. column-width é flexível, adequando-se a conteúdo de comprimento desconhecido que deve ser auto-colunado, enquanto width é fixo. As duas abordam dimensões completamente diferentes da mesma caixa.
QO que acontece quando column-width e column-count são definidos juntos?
ADefinidas juntas, column-count atua como o limite superior e column-width como a largura ideal; o navegador encontra a melhor solução sob ambas as restrições, que é o número de colunas que cabem nessa largura, mas nunca mais que column-count. Por exemplo, column-width:150px; column-count:4 em um contêiner de 500px cabe apenas 3 colunas, então 3 são renderizadas. Essa combinação oferece tanto uma largura mínima confortável quanto um número máximo de colunas.
QO que significa column-width:auto?
Aauto significa que a largura da coluna não é decidida por esta propriedade; fica a cargo de column-count ou do navegador. É o valor padrão. Quando apenas column-width é definido e column-count não, o navegador divide o contêiner em colunas de aproximadamente essa largura; quando ambos são definidos, a largura automática da coluna é irrelevante e column-count governa. Use column-width:auto explicitamente apenas quando quiser cancelar uma largura anterior.
QComo construo layouts de várias colunas responsivos com column-width?
ADefina apenas column-width e pule column-count, por exemplo column-width:250px, e o navegador decide o número de colunas a partir da largura do contêiner: 4 a 5 colunas em telas largas, caindo para 1 ou 2 em telas estreitas, sem necessidade de media queries. Essa é a vantagem de column-width sobre column-count, e funciona bem para conteúdo voltado à leitura, já que as colunas sempre ficam perto da largura ideal.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
columns (Abreviação de várias colunas)
A abreviação de column-count e column-width.
column-count
Define o número de colunas.
