Preenchimento de coluna CSS: controla como se reparte o conteúdo nas colunas

Início » Python » Preenchimento de coluna CSS: controla como se reparte o conteúdo nas colunas

Se você estiver trabalhando com designs de várias colunas em CSS, tarde ou tarde, você começará com preenchimento de coluna, a propriedade que decide como reparte o conteúdo entre essas colunas. Este recurso resulta chave para controlar se o texto for distribuído de forma equilibrada ou se estiver cheio coluna a coluna até agosto do espaço ou do conteúdo, algo especialmente importante quando limita a altura de um contêiner multicoluna.

Antes de medirmos em harina, saiba que column-fill se define através de palavras chaves e que seu valor inicial é balance. É dito que, por defeito, os navegadores tentarão equilibrar a quantidade de conteúdo em cada coluna; No entanto, há matemáticas interessantes quando você entra no jogo em alturas fixas, contextos fragmentados como a impressão ou a paginação, e os históricos específicos do suporte entre navegadores.

O que é preenchimento de coluna e como reparte o conteúdo

A propriedade preenchimento de coluna controla o modo em que as colunas de um contêiner multicoluna são reiniciadas. Se especifica valores por palavra-chave e seu valor por defeito é saldo, o que implica que o navegador tentará que todas as colunas tenham uma quantidade de conteúdo semelhante na medida do possível.

Os valores relevantes implementados em navegadores são auto e balance. Com auto, o conteúdo é virado de forma sequencial: enche a primeira coluna até alcançar o limite (por exemplo, a altura) e passa para a próxima, pode-se dar colunas posteriores, quase todas as vagas ou totalmente vagas, se não houver conteúdo suficiente.

Com equilíbrio, em mudança, o motor tentará compartilhar o conteúdo de forma equitativa entre todas as colunas, o que suele dar como resultado alturas visualmente parecidas em cada coluna dentro do contêiner. Quando há uma restrição de altura, esta estratégia pode fazer com que a última linha de alguma coluna alcance a borda inferior do contêiner: o navegador prioriza o equilíbrio horizontal sobre rascar uns pixels de altura maiores em uma única coluna.

Há um detalhe importante em contextos fragmentados (por exemplo, mídias paginadas ou impressões): solo o último fragmento se equilibra. É dito que se o conteúdo for repetido em várias páginas, o equilíbrio será aplicado apenas na última delas, não em todas. Este comportamento é relevante para maquetes orientadas para imprimir em leitores que dividem o fluxo nas páginas.

A especificação também define um valor chamado balance-all, pensado para equilibrar todas as páginas ou fragmentos, mas hoy por hoy não conta com suporte nos navegadores principais. É útil conhecê-lo se você estiver na documentação ou no padrão, mas não poderá usá-lo na produção sem polyfills ou comportamentos alternativos.

Conselho prático muito útil: quando você estabelece uma altura em um contêiner multicoluna, o efeito de preenchimento de coluna se torna muito mais evidente. Se marcar uma altura concreta, você pode forçar um comportamento mais “revista” (equilibrado) ou mais “lista” (secuencial), escolhendo equilíbrio ou auto según, você concorda com a estética ou a legibilidad do bloco.

Por exemplo, em um caso típico com uma longa lista de elementos, você pode tentar algo assim (definir o uso de prefijos para ambientes antigos e na altura forçada): este patrón histórico ajuda a descobrir motores baseados em WebKit e Gecko de versões anteriores.

ul {
  height: 300px;
  -webkit-columns: 3;
  -moz-columns: 3;
  columns: 3;
  -moz-column-fill: balance; /* Soporte antiguo de Gecko */
  column-fill: balance;      /* Valor por defecto y recomendado para equilibrar */
}

Em cenários onde você deseja imitar o comportamento do sono sequencial, você pode alternar para column-fill: auto. Isso foi especialmente útil para que o Firefox se comportasse da mesma forma que outros navegadores quando o conteúdo tinha altura fixa, porque o Firefox tendia a se equilibrar automaticamente nas seguintes situações:

ul {
  height: 300px;
  columns: 3;
  column-fill: auto; /* Llenado columna a columna, puede dejar huecos en las últimas */
}

Uma analogia simples: imagine que sirva zumo em vários vasos. Com equilíbrio, tente que cada vaso tenha uma cantidad semelhante, mas isso significa que ninguém fica perto da borda. Com auto, encha um vaso até arriba, depois o próximo, e assim sucessivamente até que você quedas sem zumo; É possível que o último par de vasos fique meio vazio ou vazio.

Exemplos práticos, sintaxe e padrões de uso

A sintaxe é concisa, pois só suporta palavras-chave. Você pode declarar como column-fill: balance; o preenchimento de coluna: automático; e combine-a com qualquer outra propriedade do módulo de multicolunas: contagem de colunas, largura de coluna, lacuna de coluna, regra de coluna, colunas (abreviação), etc.

/* Sintaxis básica */
.selector {
  column-fill: balance; /* valor inicial */
}

.selector {
  column-fill: auto;    /* relleno secuencial */
}

Se você quiser ver um exemplo mínimo, experimente um bloco de texto e duas ou três colunas. Defina o número de colunas, dê uma altura e alterne entre balance e auto para apreciar a diferença instantaneamente:

<!-- HTML -->
<section class="demo-multicol">
  <h3>Noticias breves</h3>
  <p>Mucho texto...</p>
  <p>Más texto...</p>
  <p>Y así sucesivamente...</p>
</section>

/* CSS */
.demo-multicol {
  height: 340px;
  columns: 3 16rem;  /* 3 columnas con ancho sugerido */
  column-gap: 1.5rem; 
  column-fill: balance; /* Prueba con auto */
}

Em ambientes com paginação ou impressão (contextos fragmentados), lembre-se do matiz: solo se equilibra o último fragmento. Se você estiver criando um folheto ou um relatório que vai para o papel, esse detalhe pode afetar a consistência visual entre as páginas, principalmente se as colunas não estiverem carregadas de conteúdo de maneira uniforme.

Para experimentar ao vivo no estilo “Try it yourself”, crie um exemplo rápido em seu editor ou em um playground online. Alternar o valor do preenchimento da coluna e forçar uma altura permitirá que você perceba como alterar os blocos quando o navegador decide equilibrar ou virar em sequência.

Algo que apareceu em experiências anteriores é que, em certas implementações, alterar o preenchimento de coluna dinamicamente (por exemplo, com JavaScript) sem sempre ser aplicado instantaneamente. Você teve que forçar um refluxo/relé para que o motor recalculasse a disposição. Se isso acontecer, um truque clássico é ler e escrever uma propriedade que força o refluxo ou estilos recalculares após alterar o preenchimento de coluna.

Além do preenchimento de coluna, você deve ter à mão as propriedades relacionadas ao módulo multicolunas. column-count estabelecer quantas colunas gera o conteúdo, column-width define o ponto ideal de cada coluna e colunas é a abreviatura que aceita ambas. column-gap marca o espaço entre colunas e column-rule pinta uma “regla” ou linha separadora entre elas.

• contagem de colunas: número de colunas desejadas.
• largura da coluna: ancho objetivo de cada coluna.
• colunas: abreviatura que combina contagem e largura.
• lacuna de coluna: separação horizontal entre colunas.
• regra da coluna: trazo entre colunas (ancho/estilo/color).

Quando o contêiner tem uma altura fixa, a interação entre preenchimento de colunas e contagem de colunas/largura de colunas é muito pequena. equilíbrio tratará de que todas as colunas terminem com alturas semelhantes, embora não haja nada tocando a borda inferior exata; auto, em mudança, apilará linhas até o limite da altura em uma coluna e somente então seguirá com o seguinte.

Se houver documentação antiga ou projetos legados, você não esquecerá os prefixos. Durante um tempo, foram usados ​​​​comunes -moz- para Gecko (Firefox) e -webkit- para WebKit/Blink em propriedades como colunas ou preenchimento de coluna. Hoje em dia a necessidade é menor, mas em ambientes corporativos com navegadores desactualizados eles são úteis.

.legacy-multicol {
  height: 280px;
  -webkit-columns: 3;
  -moz-columns: 3;
  columns: 3;
  -moz-column-fill: auto; /* Compatibilidad con versiones antiguas */
  column-fill: auto;
}

Quando há “Salida” ou “Saída”, quando você faz testes, verifique uma das coisas: se todas as colunas tiverem uma altura semelhante (equilíbrio) ou se houver colunas finais vazias ou médias cheias (auto). Essa observação visual é a pista mais rápida para confirmar se sua declaração está sendo aplicada como espera.

Compatibilidade entre navegadores, histórico e recursos

O suporte moderno de preenchimento de colunas nos navegadores é amplo, embora sua história venha com matemática. Durante anos, o Firefox foi o que ofereceu um comportamento mais consistente com o equilíbrio em contêineres com altura fixa, enquanto outros navegadores, ao enfrentarem essa restrição, tendem a renovar a forma sequencial. Para forçar a “experiência sequencial” no Firefox, você pode definir column-fill: auto.

Com o tempo, os motores WebKit/Blink foram alinhados. Foi observada a disponibilidade prática dos valores nas versões mediadas da década passada, com notas como que, em certos momentos, alterar a propriedade para quente não atualizava o layout antes de forçar um recálculo. Esta classe de detalhes de implementação foi bem-sucedida, mas se você trabalhar com alternâncias ao vivo, não haverá perda de vista, a necessidade de provocar um retransmissão se não houver efeito imediato.

Se atendermos às referências de compatibilidade, encontramos limites de versões onde a propriedade figura como suportada. As cifras de referência habituais apresentam compatibilidade plena com Chrome 50, Edge 12, Firefox 52, Opera 37 e Safari 9. Observe que seus números são guiados com base em tabelas de suporte consolidadas e que, em ambientes reais, podem influenciar sinalizadores, implementações parciais ou bugs de versões específicas.

• Google Chrome: 50.0 ou superior.
• Microsoft Edge: 12.0 ou superior.
• Mozilla Firefox: 52.0 ou superior.
• Opera: 37.0 ou superior.
• Safári: 9.0 ou superior.

No que diz respeito ao “equilíbrio de tudo”, embora a especificação contemple para equilibrar todo o conteúdo em contextos fragmentados, nenhum encontro foi implementado nos navegadores atuais. Uso solo como referência conceitual; na produção, limite automático e equilíbrio.

Um clássico da documentação sobre compatibilidade é a plataforma de tabelas “Posso usar…”. Estas tabelas foram mantidas com contribuições da comunidade e foram impulsionadas por editores e colaboradores conhecidos, com design e participação abertos no GitHub. Os dados de cota de uso são fornecidos por fontes como StatCounter (por exemplo, série de outubro de 2025), com geolocalização assistida por serviços como ipinfo.io e testes de navegador realizados com ferramentas de teste cruzado.

Se você estiver migrando um projeto e precisar de uniformidade com navegadores antigos, aplique esta receita: conservar prefijos -moz- e -webkit- en columns/column-fill para bases de usuários legados, adicione um valor por defeito sensato (saldo suele seja boa opção visual) e ofereça um “opt-in” a auto quando a prioridade for apurada no máximo a altura das primeiras colunas a costa de dejar as últimas mais vagas.

Lembre-se também de que, com altura fixa, alguns motores seguem priorizando decisões específicas em casos limites. Teste o conteúdo real e os textos mais longos que uma única página para detectar efeitos de fragmentação como o hecho de que só a última “página” se equilibra.

Se você quiser se aprofundar, complemente com recursos do módulo de multicolunas de CSS e referências de DOM. Pesquise as páginas de “CSS Multiple Columns” para uma revisão de todo o conjunto de propriedades e a “propriedade HTML DOM columnFill” manipula o valor do JavaScript no momento da execução. Esses recursos te ajudarão a entender como conviver com o resto do ecossistema multicoluna.

Por último, um grande editorial: Quando leas artigos antigos, lembre-se que em 2014 era frequente que o preenchimento de colunas não funcionasse como esperabas em certos navegadores e até 2015 você comprovou suporte em versões modernas (por exemplo, Chrome 44 então). Esta cronologia explica por que veremos dicas sobre como forçar a retransmissão ao alterar o valor ou as notas de que apenas “funciona no Firefox”; Embora a situação seja bastante mais uniforme, embora a herança histórica siga baseando-se em códigos com prefixos.

Se você quiser com uma ideia operacional: equilíbrio ofrece estética e simetría, auto te da previsibilidad secuencial. Recorra a prefijos solo quando sua audiência exige, observe os contextos fragmentados onde apenas o último troço se equilibra, e não esqueça que, se houver mudanças no preenchimento da coluna sobre a marcha, você precisará forçar um retransmissor para ver o efeito. Com essas chaves, seus projetos multicolunas ficarão sólidos e fáceis de manter.