CSS column-fill: controla com es reparteix el contingut en columnes

Inici » Pitó » CSS column-fill: controla com es reparteix el contingut en columnes

Si treballa amb dissenys de diverses columnes en CSS, tard o temprano et toparà amb column-fill, la propietat que decideix com es reparteix el contingut entre aquestes columnes. Aquesta característica clau per controlar si el text es distribueix de forma equilibrada o si omple la columna a la columna fins a agotar l'espai o el contingut, algo especialment important quan limita l'alçada d'un contingut multicolumna.

Abans de mesurar en harina, convé saber que column-fill es defineix a través de paraules clau i que el seu valor inicial és balance. És dir, per defecto els navegadors intentaran equilibrar la quantitat de contingut en cada columna; sense embargo, hay matices interessants quan entren en joc alturas fixes, contextos fragmentats com la impressió o la paginació, i les peculiaritats històriques del suport entre navegadors.

Què és column-fill i com reparte el contingut

La propietat column-fill controla el mode en que es rellenen les columnes d'un contenedor multicolumna. S'especifica mitjançant valors per paraula clau i el seu valor per defecto és equilibri, el que implica que el navegador intentarà que totes les columnes queden amb una quantitat de contingut similar en la mesura del possible.

Els dos valors rellevants implementats en navegadors son auto i balance. Amb auto, el contingut es vierte de manera seqüencial: s'omple la primera columna fins a aconseguir el límit (per exemple, la altura) i passa a la següent, pudiendo quedar columnes posteriors casi vacías o totalment buides si no hi ha contingut suficient.

Amb equilibri, en canvi, el motor intentará repartir el contingut de forma equitativa entre totes les columnes, lo que suele dar com a resultats altures visualment parecides en cada columna dins del contenedor. Quan hi hagi una restricció d'alçada, aquesta estrategia pot provocar que l'última línia d'alguna columna no abast el borde inferior del contingut: el navegador prioritza l'equilibri horitzontal sobre rascar uns píxels d'alçada més en una sola columna.

Hi ha un detall important en contextos fragmentats (per exemple, paginats o impressió): mitjans solo el último fragmento se equilibra. És dir, si el contingut es reparteix en diverses pàgines, l'equilibri s'aplica únicament a l'última d'elles, no a totes. Aquest comportament és rellevant per a maquetacions orientades a imprimir o lectors que divideixen el flux en pàgines.

L'especificació també defineix un valor anomenat balance-all, pensat per equilibrar totes les pàgines o fragments, però avui no compte amb suport als navegadors principals. És útil conèixer-lo per si lo ves en documentació o en l'estàndard, però no ho podràs utilitzar en producció sense polyfills o comportaments alternatius.

Consell pràctic molt útil: quan estableix una alçada a un contingut multicolumna, l'efecte de column-fill torna molt més evident. Si marques una altura concreta, pots forçar un comportament més “revista” (equilibrat) o més “lista” (secuencial), elegint l'equilibri o l'auto segons convenga l'estètica o la llegibilitat del bloc.

Per exemple, en un cas típic amb una llista llarga d'elements, podrien provar així (fíjate en l'ús de prefixos per a entorns antics i en l'alçada forçada): aquest patró històric ajuda a cobrir motors basats en WebKit i Gecko de versions anteriors.

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 */
}

En escenaris on volen imitar el comportament de relleno seqüencial, pots alternar a column-fill: auto. Això era especialment útil per al Firefox comportar-se igual que altres navegadors quan el contenidor tenia alçada fija, el lloc que Firefox tendia a equilibrar-se automàticament en aquestes situacions:

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

Una analogia senzilla: imagina que sirves zumo en varios vasos. Amb balance, intentas que cada vaso tingui una quantitat parecida, encara que això signifique que ninguno llegue just al borde. Amb auto, omple un vaso hasta arriba, luego el siguiente, y así sucesivamente fins que us quedes sin zumo; és possible que l'últim par de vasos es queden a mitjans o buits.

Ejemplos prácticos, sintaxis y patrones de uso

La sintaxis és concisa, ja que només admet paraules clau. Pots declarar com column-fill: balance; o column-fill: automàtic; i combinarla amb qualsevol altra propietat del mòdul de multicolumnes: column-count, column-width, column-gap, column-rule, columns (abreviatura), etc.

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

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

Si voleu veure un exemple mínim, prova amb un bloc de text i dos o tres columnes. Define el nombre de columnes, dales una altura i alterna entre balance y auto per apreciar la diferència a l'instant:

<!-- 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 */
}

En entorns amb paginació o impressió (contextos fragmentats), recordeu el matiz: solo s'equilibra l'últim fragment. Si estàs fent un fullet o un informe que vaya a paper, aquest detall pot afectar a la consistencia visual entre pàgines, sobre tot si les columnes no estan uniformement carregades de contingut.

Per provar en viu a l'estil “Try it yourself”, crea un exemple ràpid en el teu editor o en un playground online. Alternar el valor de column-fill i forçar una alçada permetrà percibir com canviaran els blocs quan el navegador decideixi equilibrar o verter en seqüència.

Algo que apareció en experiències anteriors és que, en algunes implementacions, canviar column-fill dinámicament (per exemple, amb JavaScript) no sempre s'aplica a l'instant. Había que forçar un reflux/relayout per al motor recalcular la disposició. Si succeeix, un truc clàssic és llegir i escriure una propietat que ha de recórrer o recalcular estils després de canviar column-fill.

Més allá de column-fill, convé tenir a mà les propietats relacionades del mòdul multicolumnes. column-count estableix cuántas columnes genera el contenedor, column-width define l'ancho ideal de cada columna i columnes és el shorthand que accepta tots dos. column-gap marca l'espai entre columnes i column-rule pinta una “regla” o línia separadora entre elles.

• recompte de columnes: número de columnes desitjat.
• amplada de columna: ancho objectiu de cada columna.
• columnes: abreviatura que combina count y width.
• espai de columna: separació horitzontal entre columnes.
• regla de columna: trazo entre columnes (ancho/estilo/color).

Quan el contingut té una alçada fixa, la interacció entre column-fill i column-count/column-width no es nota moltíssim. equilibri tractará de que totes les columnes terminen amb alturas parecidas, aunque ninguna acabe tocando el borde inferior exacto; auto, en canvi, apilarà línies fins al límit de l'alçada en una columna i només llavors seguirà amb la següent.

Si vienes de documentación antigua o de proyectos legacy, no et olvides de los prefijos. Durant un temps van ser comunes -moz- per Gecko (Firefox) i -webkit- per WebKit/Blink en propietats com columnes o column-fill. Hoy en dia la necessitat és menor, però en entorns corporatius amb navegadors desactualitzats segueixen sent útils.

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

En quant a “Salida” o “Output”, quan facis proves, fíjate en dues coses: si totes les columnes tenen una altura similar (equilibri) o si hi ha columnes finals vacías oa mig llenar (automàtic). Esa observació visual és la pista més ràpida per confirmar que la vostra declaració està aplicant com a esperades.

Compatibilitat entre navegadors, història i recursos

El suport modern de column-fill als navegadors és ampli, encara que la seva història vingui amb màtiques. Durant anys, Firefox va ser el que va oferir un comportament més consistent amb l'equilibri en contenedors amb altura fija, mentre que altres navegadors, al enfrontar-se a aquesta restricció, tendien a rellenar de forma seqüencial. Per forçar la “experiència seqüencial” a Firefox, podia fixar column-fill: auto.

Amb el temps, els motors WebKit/Blink es van alinear. S'ha observat la disponibilitat pràctica dels valors cap a les versions de mitjans de la dècada passada, amb notes com que, en certs moments, canviar la propietat en calent no actualitzar el layout fins a forçar una recàlcul. Esa classe de detalls de implementación ha ido puliéndose, pero si treballa amb toggles en viu no pierdes de vista la necessitat de provocar un relayout si no ve l'efecte a l'instant.

Si atendem a referències de compatibilitat, trobem umbrales de versions on la propietat figura com a suportada. Les xifres de referència habituals es troben a la compatibilitat plena a partir de Chrome 50, Edge 12, Firefox 52, Opera 37 i Safari 9. Ten en compte que son números guia basats en taules de suport consolidats i que, en entorns reals, poden influir en flags, implementacions parcials o errors de versions concretes.

• Google Chrome: 50.0 o superior.
• microsoft Edge: 12.0 o superior.
• Mozilla Firefox: 52.0 o superior.
• Òpera: 37.0 o superior.
• Safari: 9.0 o superior.

En quant a “balance-all”, encara que l'especificació ho contempla per equilibrar tot el contingut en contextos fragmentats, no es troba implementat als navegadors actuals. Utilitzar només com a referència conceptual; en producció, limitar a auto i balance.

Un clàssic de la compatibilitat és la plataforma de taulers “Can I use documentation…”. Aquests taules es mantenen amb contribucions de la comunitat i han estat impulsades pels editors i col·laboradors coneguts, amb disseny i participació oberta a GitHub. Los datos de cuota d'ús suelen proveir de fonts com StatCounter (per exemple, series d'octubre de 2025), amb geolocalització asistida per serveis com ipinfo.io i proves de navegadors realitzats amb eines de test creuat.

Si andas migrant un projecte i necessites uniformitat amb navegadors antics, aplica aquesta recepta: conserva prefixos -moz- i -webkit- en columns/column-fill per a bases d'usuaris legals, añadeu un valor per defecto sensat (balance suele ser bona opció visual) i ofereix un “opt-in” a auto quan la prioritat sea apurar al màxim l'alçada de les primeres columnes a la costa de deixar les últimes més buides.

Recordeu també que, amb altura fija, alguns motors segueixen prioritzant decisions diferents en casos límit. Prueba amb contingut real i amb textos més llargs que una sola pàgina per detectar efectes de fragmentació com el fet de que solo la última “página” es equilibra.

Si voleu aprofundir, complementa els recursos del mòdul de multicolumnes de CSS i referències del DOM. Busqueu les pàgines de “CSS Multiple Columns” per a un repas de tot el conjunt de propietats i el “HTML DOM columnFill property” si manipula el valor des de JavaScript en el temps d'execució. Aquests recursos us ajudaran a entendre com convive column-fill amb el resto del ecosistema multicolumna.

Per darrer, un apunt editorial: quan lleis articles antics, recordeu que en 2014 era freqüent que column-fill no funcioni com a esperabas en certs navegadors i que cap a 2015 ja es comprovava suportar en builds modernes (per exemple, Chrome 44 entonces). Esa cronologia explica per quins consells sobre forçar relayout al canviar el valor o notes de que només “funciona en Firefox”; avui la situació és bastant més uniforme, encara que l'herència històrica segueix sent en les bases de codi amb prefixos.

Si et quedes amb una idea operativa: Balanç ofereix estètica i simetria, auto et dóna previsibilitat seqüencial. Repetiu els prefixos sols quan us escolteu la necessitat, vigileu els contextos fragmentats on només l'últim trozo s'equilibra, i no olvides que, si canvien column-fill sobre la marxa, s'han de forçar un relayout per a l'efecte. Amb aquestes claus, els vostres dissenys multicolumna quedaran sòlids i fàcils de mantenir.