CSS column-fill: controla cum se reparte el conținut în coloane

Acasă » Piton » CSS column-fill: controla cum se reparte el conținut în coloane

Si lucrează cu design de mai multe coloane în CSS, târziu sau temprano te topați cu column-fill, la proprietatea care decide cum se reparte conținutul între acele coloane. Esta caracteristică cheie pentru a controla textul se distribuie de forma echilibrată sau se umple o coloană până la următorul spațiu sau conținut., algo especialmente importante când limitează la înălțimea unui conținut multicoloană.

Antes de meternos en harina, conviene saber que column-fill se define a través de cuvintele-clave și că valoarea inițială este echilibrată. Este deci, pornește defectul navigatorilor încercând să echilibreze cantitatea de conținut în fiecare coloană; sin embargo, hay matices interesantes când intran în joc alturas fijas, contexts fragmentados ca la imprimarea sau paginația, și la particularitățile istorice ale suportului între navigatori.

Qué es column-fill și cómo reparte el conținut

La proprietate column-fill controla el modo în care se rellenan las columnas de un contenedor multicolumna. Se specifica prin valori por palabra-clav și su valor por defecto este balance, ceea ce implică browserul încearcă să încerce toate coloanele aflate într-o cantitate de conținut similară în măsura posibilului.

Valorile relevante implementate în navigatori sunt auto și echilibru. Con auto, el conținut se vierte de manera secuencial: se umple la prima columna până la atinge el límite (de exemplu, la înălțimea) și se trece la următoarea, pudiendo quedar columnas posteriores casi vacías sau totalmente vacías și nu există suficiente conținut.

Cu echilibru, în schimb, el motor va încerca să repartizeze conținutul formei echitative între toate coloanele, lo que suele dar como rezultate alturas visualmente parecidas en cada columna dentro del contenedor. Când există o restricție de înălțime, această strategie poate provoca că la ultima linie de vreo coloană nu atinge bordul inferior al conținutului: el prioriza echilibrul orizontal asupra unor pixeli de înălțime mai mult într-o singură columna.

Există un detaliu important în contexte fragmentate (de exemplu, paginile de imprimare): solo el último fragmento se equilibra. Este deci, și conținutul se reparte în mai multe pagini, echilibrul se aplică unic în ultima parte, nu în toate. Acest comportament este relevant pentru maquetările orientate pentru a imprima și a lectorilor care împart fluxul în pagini.

Specificația definește, de asemenea, un valor numit echilibru-all, gândit pentru a echilibra toate paginile sau fragmentele, pero hoy por hoy nu cuenta cu suportul în browserele principale. Este util să cunoască documentația și standardul, dar nu puteți utiliza în producție fără polifills sau comportamente alternativi.

Consejo práctico muy útil: când stabilește o înălțime a unui conținut multicoloană, efectul column-fill se vuelve mult mai evident. Si marcas una altura concreta, poti forza un comportament mai “revista” (echilibrat) sau mai “lista” (secuencial), eligiendo balance o auto según te convenga la estética o la legibilidad del bloc.

De exemplu, într-un caz tipic cu o listă lungă de elemente, ar putea proba algo así (fijate în uzul prefixelor pentru entornos antiguos și în înălțimea forțată): Acest model istoric ajută la acoperirea motoarelor bazate pe WebKit și Gecko de versiuni anterioare.

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

În scenarii unde vrei să imite comportamentul succesiv, puteți alterna a coloane-fill: auto. Este deosebit de util pentru că Firefox se comportă la fel ca și alți navigatori atunci când conținutul avea înălțime fija, când Firefox tinde să se echilibreze automat în următoarele situații:

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

O analogie simplă: imagina que sirves zumo en varios vasos. Con balance, intentas que cada vaso are o cantitate parecida, chiar dacă este semnificativ că ninguno llegue justo al borde. Con auto, llenas un vaso hasta arriba, luego el siguiente, y así sucesivamente hasta que te quedas sin zumo; es posible que el último par de vasos se queden a medias o vacíos.

Ejemplos prácticos, sintaxis y patrones de uso

La sintaxis este concisă, că doar admite words key. Puedes declararla ca column-fill: balance; o coloană-umplere: auto; y combinarla cu orice altă proprietate del modul de multicolumnas: column-count, column-width, column-gap, column-rule, columns (scurtand), etc.

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

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

Dacă vrei să vezi un exemplu minim, proba cu un bloc de text și două sau trei coloane. Definiți numărul de coloane, dales o înălțime și alterna între echilibru și auto pentru a aprecia la diferenta al instante:

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

În entornos cu paginarea o imprimare (contextes fragmentados), recuerda el matiz: solo se echilibra el último fragment. Si estás maquetando un folleto sau un informe que vaya a paper, este detaliu poate afecta consistencia visual intre pagini, despre tot si coloanele nu sunt uniform cargadas de continut.

Pentru a proba în vivo în stilul „Încercați-l singur”, creează un exemplu rapid în editorul tău sau într-un loc de joacă online. Alternar el valor de column-fill și forzar o înălțime vă va permite percepir cómo cambian los blocs cuando el navegador decide equilibrar sau verter en secuencia.

Algo care a apărut în experiențe anterioare, în anumite implementări, schimba column-fill dinamic (de exemplu, cu JavaScript) nu întotdeauna aplicaba al instante. Había que forzar un reflux/relayout para que el motor recalculara la dispoziție. Si te intampla, un truco clasic este leer si scriu o proprietate care a fost reflow sau recalcular stiluri tras cambiar column-fill.

Más allá de column-fill, conviene tener a mano las properties related of module multicolumnas. column-count stabilește cuántas columnas genera el contenedor, column-width define el ancho ideal de cada columna y columns este el shorthand que accepta ambii. column-gap marca el spațiu între coloane și column-rule pinta o „regla” sau linia separatoare între ele.

• număr de coloane: número de columnas deseado.
• lățimea coloanei: ancho objetivo de cada columna.
• coloane: abreviatura que combina count y width.
• gol pe coloană: separare orizontală între coloane.
• regulă de coloană: trazo entre columnas (ancho/estilo/color).

Când el contenedor are o înălțime fija, la interacțiunea între column-fill și column-count/column-width se notează foarte mult. echilibrul tratará de que toate coloanele terminen cu înălțimi parecidas, aunque ninguna acabe tocando el borde inferior exacto; auto, en cambio, apilará líneas hasta el límite de la altura într-o coloană și atunci seguirá cu la următoarea.

Si vienes de documentation antigua o de proyectos legacy, no te olvides de los prefijos. În timpul unui timp au fost comune -moz- pentru Gecko (Firefox) și -webkit- pentru WebKit/Blink în proprietăți ca columns o column-fill. Hoy en day the need is minor, pero en entornos corporativos con browseres desactualizados siguen siendo útiles.

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

În ceea ce privește „Salida” sau „Output”, când faceți probe, fiți în două lucruri: si todas las columnas tienen una altura similar (balance) sau si hay columnas finales vacías oa medio llenar (auto). Aceasta observație vizuală este la pista mai rapidă pentru a confirma că declarația este aplicată ca așteaptă.

Compatibilitate între navigatori, istorie și resurse

El soporte moderno de column-fill în los navegadores este vast, chiar dacă istoria vine cu matices. De-a lungul anilor, Firefox a oferit un comportament mai consistent cu echilibrul în contenții cu înălțimea fija, în timp ce otros navigatorii, al enfrentarse a esa restricción, tendían a rellenar de forma secuencial. Pentru a forța „experiența secvențională” în Firefox, poate fi afișat column-fill: automat.

Cu timpul, motoarele WebKit/Blink au fost aliniate. Se observă disponibilitatea practică a valorilor către versiunile mediate din deceniul trecut, con not as as as that, in ciertos moments, change the property in hot no updateba the layout to forzar una recalculación. Este o clasă de detalii de implementare a ido puliéndose, pero si lucrează cu toggles în vivo nu pierdas de vista la necesitatea de a provoca un relayout și nu ves el efect al instante.

Si atendemos a referencias de compatibilidad, encontramos umbrales de versions donde la proprietate figura ca soportada. Cifrele de referință obișnuite se află în compatibilitatea completă cu Chrome 50, Edge 12, Firefox 52, Opera 37 și Safari 9. Ten în cuenta care sunt numere, ghid bazate pe tabele de suport consolidate și pe care, în medii reale, pot influența steaguri, implementări parțiale sau erori ale versiunilor concrete.

• Google Chrome50.0 sau mai mare.
• Microsoft Edge12.0 sau mai mare.
• Mozilla Firefox52.0 sau mai mare.
• Operă37.0 sau mai mare.
• Safari9.0 sau mai mare.

În ceea ce privește „balance-all”, deși specificația a contemplat pentru a echilibra tot conținutul în context fragmentat, nu se află implementat en los navegadores actuales. Úsalo solo como referință conceptuală; en producție, limita a auto y balance.

Un clasic de compatibilitate este platforma de tabele „Pot folosi documentația…”. Aceste tabele se mențin cu contribuții ale comunității și au fost impulsate de editori și colaboratori cunoscuți, cu design și participación deschisă în GitHub. Los datos de cuota de utilizare suelen provenir de fuentes ca StatCounter (de exemplu, serie de octombrie 2025), cu geolocalización asistată de servicii ca ipinfo.io și probe de navigatori realizate cu instrumente de testare cruzate.

Si andas migrando un proiect y necesitas uniformidad con navegadores antiguos, aplica esta receta: conserva prefijos -moz- y -webkit- en columns/column-fill pentru bazele utilizatorilor legadas, añade un valor por defecto sensato (balance suele ser buena opción visual) și oferă un „opt-in” a auto when the priority sea apurar the maximum the height of the first columns a costa dejar las ultimas more vacías.

Amintiți-vă că, cu înălțimea fija, unele motoare urmează să priorizeze decizii diferite în cazuri limite. Prueba cu conținut real și cu texte mai lungi ca o singură pagină pentru detectarea efectelor fragmentării como el hecho de que solo la última „página” se echilibrează.

Si quieres profundizar, complementa con resurse del module de multicolumnas de CSS y referencias del DOM. Căutați paginile „CSS Multiple Columns” pentru un repas de tot setul de proprietăți și el „HTML DOM columnFill property” și manipulează valoarea din JavaScript în timp de execuție. Aceste resurse vă vor ajuta să înțelegeți cum convive column-fill cu restul ecosistemului multicolumna.

Por último, un punct editorial: când leas articole antiguos, recuerda que en 2014 era frecvent que column-fill nu funcționează ca așteaptă în anumite navigatoare y que hacia 2015 se comprobaba suport en builds modernes (de exemplu, Chrome 44 entonces). Este cronologia explicată prin ce verás sfaturi despre forzar relayout pentru a schimba valoarea sau notele de „funcționare în Firefox”; hoy la situación este bastante más uniformă, deși la herencia histórica sigue asomându-se în baze de código cu prefijos.

Si te afli cu o idee operativa: echilibrul oferă estetică și simetrie, auto te da previsibilitatea secvențională. Recurre a prefijos solo cuando tu audiencia lo requiera, vigila los contextos fragmentados donde solo el último trozo se equilibra, și nu olvides que, și cambias column-fill sobre la marcha, care debas forzar un relayout para ver el efect. Cu aceste chei, dvs. designs multicolumna vor rămâne solide și ușor de menținut.