A especificação CSS3 introduziu um módulo dedicado ao layout de múltiplas colunas, inspirado na disposição visual de jornais e revistas. Esse recurso permite dividir o conteúdo textual de um elemento em várias colunas de forma semântica e responsiva.
Propriedade abreviada: columns
A propriedade columns funciona como shorthand para definir simultnaeamente a largura e a quantidade de colunas de um elemento.
columns: 200px 3;
columns: auto 4;
columns: 180px;
| Componente | Descrição |
|---|---|
| <column-width> | Estabelece a dimensão mínima desejada para cada coluna individual |
| <column-count> | Indica o número máximo de colunas que o conteúdo deve ocupar |
Definindo largura com column-width
Quando aplicada isoladamente, a propriedade column-width especifica a dimensão base de cada coluna gerada. O navegador calcula quantas colunas cabem no espaço disponível respeitando esse valor como mínimo.
.artigo-editorial {
column-width: 250px;
}
.postagem-blog {
column-width: auto;
}
| Valor | Comportamento |
|---|---|
| auto | O navegador determina automaticamente a largura das colunas com base no espaço disponível e outras propriedades configuradas |
| <length> | Aceita valores positivos em unidades como px, em, rem, vw, etc. Valores negativos são ignorados pelo interpretador |
Controlando a quantidade com column-count
Esta propriedade impõe um limite superior para o número de colunas que o conteúdo do elemento deve ser distribuído.
.container-colunas {
column-count: 3;
}
.secao-texto {
column-count: auto;
}
| Valor | Comportamento |
|---|---|
| auto | Valor padrão — o número de colunas é derivado automaticamente a partir da largura do elemento e do column-width definido |
| <integer> | Inteiro positivo que fixa a quantidade exata de colunas. O valor zero e números negativos são considerados inválidos |
Espaçamento entre colunas com column-gap
Para inserir distância horizontal entre as colunas adjacantes, utiliza-se column-gap.
.wrapper-multiplas-colunas {
column-gap: 2.5em;
}
.layout-revista {
column-gap: normal;
}
| Valor | Comportamento |
|---|---|
| normal | Valor inicial — equivale a 1em na maioria dos contextos, podendo variar conforme a implementação do agente de navegação |
| <length> | Distância personalizada entre as colunas. Aceita unidades absolutas e relativas, mas não permite valores negativos |
Separação visual com column-rule
Assim como border, a propriedade column-rule aplica uma linha decorativa entre colunas adjacentes. Entretanto, essa linha não ocupa espaço no fluxo do layout — ela é desenhada sobre a área de gap existente.
.container-editorial {
column-rule: 1px solid #999;
}
.revista-digital {
column-rule: 3px double coral;
}
.jornal-online {
column-rule-width: medium;
column-rule-style: dashed;
column-rule-color: slategray;
}
| Componente | Detalhes |
|---|---|
| column-rule-width | Espessura da linha separadora. Aceita valores numéricos positivos ou as palavras-chave thin, medium e thick. O valor inicial é medium |
| column-rule-style | Estilo visual da linha. Suporta os mesmos valores de border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset |
| column-rule-color | Cor da linha. Por padrão herda o valor da propriedade color do elemento. Aceita qualquer notação de cor válida, incluindo transparent |
Extensão transversal com column-span
Em layouts com múltiplas colunas, pode haver elementos — como títulos de seção ou legendas — que precisam atravessar horizontalmente todas as colunas. A propriedade column-span atende exatamente essa necessidade.
.titulo-secao {
column-span: all;
}
.paragrafo-normal {
column-span: none;
}
| Valor | Comportamento |
|---|---|
| none | Valor padrão — o elemento permanece dentro de sua coluna de origem, sem atravesssar as demais |
| all | O elemento interrompe o fluxo das colunas e se estende por toda a largura do container, posicionando-se acima das colunas no eixo Z |