Propriedade CSS column-fill
Use a propriedade CSS column-fill para especificar se as colunas serão preenchidas de forma equilibrada ou não. Valores: balance. Veja exemplos.
A propriedade column-fill controla como o conteúdo é distribuído pelas colunas de um layout de múltiplas colunas — seja espalhado uniformemente por todas as colunas, ou inserido sequencialmente em uma coluna de cada vez.
É uma das propriedades CSS3 e funciona em conjunto com column-count e columns para criar layouts no estilo de jornal.
Quando usar
column-fill só tem efeito visível quando o contêiner de múltiplas colunas tem uma altura fixa (por exemplo, height: 200px). Sem um limite de altura, o navegador não tem motivo para parar de preencher uma coluna, então ambos os valores têm aparência idêntica.
Existem dois valores significativos:
balance(o padrão) tenta deixar todas as colunas com aproximadamente o mesmo comprimento, para que o bloco de colunas pareça uniforme e o conteúdo termine na mesma linha em cada uma. É o que geralmente se usa para textos legíveis no estilo de jornal.autopreenche a primeira coluna até a altura total do contêiner, depois passa para a próxima, e assim por diante. A última coluna pode ser muito mais curta que as demais. Use quando a ordem visual das colunas importa mais do que o equilíbrio.
| Valor Inicial | balance |
|---|---|
| Aplica-se a | Elementos multicoluna. |
| Herdado | Não. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.columnFill = "balance"; |
Sintaxe
column-fill: auto | balance | balance-all | initial | inherit;Exemplo da propriedade column-fill com o valor balance
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.balance {
column-count: 4;
column-rule: 1px solid black;
column-fill: balance;
}
</style>
</head>
<body>
<h1>Column-fill property example</h1>
<p class="balance">
This is a bunch of text split into multiple columns. The CSS column-fill property is used to spread the contents evenly across all the columns. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>Resultado
Com balance, o texto é distribuído de forma que todas as quatro colunas terminem com aproximadamente a mesma altura.
Exemplo da propriedade column-fill com o valor auto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.auto {
height: 200px;
column-count: 3;
column-rule: 1px solid black;
column-fill: auto;
}
</style>
</head>
<body>
<h1>Column-fill property example</h1>
<p class="auto">
This is a bunch of text split into multiple columns. The CSS column-fill property is used to fill columns sequentially. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>Aqui o contêiner tem uma height: 200px fixa. Com auto, a primeira coluna é preenchida até essa altura antes de qualquer texto fluir para a próxima, portanto as colunas seguintes podem ser mais curtas — ou vazias se o texto acabar.
Valores
| Valor | Descrição |
|---|---|
| auto | Preenche as colunas sequencialmente. |
| balance | Divide igualmente o conteúdo entre as colunas. Em mídia paginada, apenas a última página é balanceada. |
| balance-all | Divide igualmente o conteúdo entre as colunas. Em mídia paginada, todas as páginas são balanceadas. |
| initial | Define a propriedade com seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |
Suporte nos navegadores
column-fill é suportada em todos os navegadores modernos. Note que balance-all tem suporte limitado e, em muitos mecanismos, auto se comporta como balance a menos que o contêiner de múltiplas colunas seja fragmentado (por exemplo, paginado ou com altura fixa definida).
Propriedades relacionadas
column-count— define quantas colunas criar.columns— abreviação paracolumn-widthecolumn-count.column-rule— desenha uma linha entre as colunas.