CSS column-fill: control, ktorý je súčasťou obsahu a stĺpcov

Domov » Pytón » CSS column-fill: control, ktorý je súčasťou obsahu a stĺpcov

Si trabajas con diseños de varias columnas en CSS, tarde alebo temprano te toparás con column-fill, la propiedad que Decision como se reparte el contenido entre esas columnas. Esta característica resulta clave para controlar si el texto se distribuye de forma equilibrada o si se llena columna a columna hasta agotar el espacio o el contenido, algo especialmente importante cuando limitas la altura de un contenedor multicolumna.

Antes de meternos en harina, conviene saber que column-fill se definuje a través de palabras clave y que su su valor inicial es balance. Es decir, por defekto los navegadores intentarán equilibrar la cantidad de contenido en cada columna; sin embargo, hay matices interesantes cuando entran en juego alturas fijas, contextos fragmentados como la impresión o la paginación, y las peculiaridades históricas del soporte entre navegadores.

Qué es column-fill y como reparte el contenido

Ovládanie vypĺňania stĺpcov je riadené spôsobom, ktorý sa zobrazuje v stĺpcoch z viacerých stĺpcov. Zobraziť špecifické hodnoty pre palabra clave y su valor por defekto es balance, lo que implica que el navegador intentará que todas las columnas queden con una cantidad de contenido podobné en la medida de lo posible.

Los dos valores relevantes implementados en navegadores son auto y balance. Con auto, el contenido sa vierte de manera secuencial: se llena la primera columna hasta alcanzar el límite (por ejemplo, la altura) y se pasa a la siguiente, pudiendo quedar columnas posteriores casi vacías o totalmente vacías si no hay suficiente contenido.

S rovnováhou, v zmene, el motor intentará repartir el contenido de forma equitativa entre todas las columnas, lo que suele dar ako resultado alturas visualmente parecidas en cada columna dentro del contenedor. Cuando hay una restricción de altura, esta estrategia puede provocar que la última línea de alguna columna no alcance el borde inferior del contenedor: el navegador prioriza el equilibrio horizontálne sobre rascar unos al píxelesles en

Sen o detailoch dôležitých v súvislostiach s fragmentami (pre príklad, stredný počet stránok alebo dojem): solo el último fragmento se equilibra. Es decir, si el contenido sa reparte en varias page, el equilibrio sa aplica únicamente en la última de ellas, no en todas. Este comportamiento es relevante para maquetaciones orientadas a imprimir oa lectores que divisionn el flujo en paginas.

La especificación también definujú un valor llamado balance-all, pensado para equilibrar todas las paginas o fragmentos, pero hoy por hoy no cuenta con soporte en los navegadores principales. Es útil conocerlo por si love ves en documentación o en el estándar, pero no lo podrás usar en producción sin polyfills o comportamientos alternativeos.

Consejo práctico muy útil: cuando estableces una altura a un contenedor multicolumna, el efecto de column-fill se vuelve mucho más evidente. Si marcas una altura concreta, puedes forzar un comportamiento más “revista” (ekvilibrado) alebo “lista” (sekuenciálny), eligiendo balance o auto según te convenga la estética o la legibilidad del bloque.

Z tohto dôvodu je typická pre zoznam prvkov, podrías probar algo así (fíjate en el uso de prefijos para entornos antiguos y en la altura forzada): este patrón histórico ayuda and cubrir motores basados ​​en WebKit y Gecko de versiones 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 */
}

En escenarios donde quieras imitar el comportamiento de relleno secuencial, puedes alternar a column-fill: auto. Špeciálna éra používaná pre Firefox je rovnaká ako v iných navegadoroch, ktoré sa používajú v rôznych situáciách:

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

Analógová senčila: imagina que sirves zumo en varios vasos. Con balance, intentas que cada vaso tenga una cantidad parecida, aunque eso signifique que 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 es concisa, ya que solo admite palabras clave. Puedes declararla como stĺpec-výplň: rovnováha; o vyplnenie stĺpcov: auto; y combinarla con cualquier otra propiedad del multicolumnas: column-count, column-width, column-gap, column-rule, columns (shorthand) atď.

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

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

Si quieres ver un ejemplo mínimo, prueba con un bloque de texto y dos o tres columnas. Definujte el numero de columnas, dales una altura y alterna entre balance y auto podľa aktuálneho rozdielu:

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

Entornos con paginación o impresión (contextos fragmentados), recuerda el matiz: solo se equilibra el último fragmento. Si estás maquetando un folleto o un informe que vaya a papel, este detalle puede afectar a la konzistencia visual entre paginas, sobre todo si las columnas no están uniformemente cargadas de contenido.

Ukážte si to naživo ako „Vyskúšajte si to sami“, vytvorte si novú hru v editore na ihrisku online. Alternar el valor de column-fill y forzar una altura te permitirá percibir como cambian los bloques cuando el navegador rozhodnúť equilibrar o verter en secuencia.

Algo que apareció en experiencias anteriores es que, en ciertas implementaciones, cambiar column-fill dinámicamente (por ejemplo, con JavaScript) no siempre aplicaba al instante. Había que forzar un reflujo/relayout para que el el motor recalculara la disposición. Si te sucede, un truco clasico es leer y escribir una propiedad que fuerce reflow or recalcular estilos tras cambiar column-fill.

Máte všetky stĺpce, ktoré sú vhodné pre rôzne typy stĺpcov. stĺpcový počet etablece cuántas columnas genera el contenedor, šírka stĺpca definovať el ancho ideálne de cada columna y stĺpce es el skratka que acepta ambos. stĺpec-medzera marca el espacio entre columnas y column-rule pinta una “regla” o línea separadora entre ellas.

• počet stĺpcov: číslo stĺpca deseado.
• šírka stĺpca: ancho objetivo de cada columna.
• stĺpce: abreviatura que combina počet y šírka.
• medzera medzi stĺpcami: separación horizontal entre columnas.
• pravidlo stĺpca: trazo entre columnas (ancho/estilo/color).

Ak chcete použiť altura fija, interacción entre column-fill y column-count/column-width is nota muchisimo. bilancia tratará de que todas las columnas terminen con alturas parecidas, aunque ninguna acabe tocando el borde inferior exclusiveo; auto, en cambio, apilará líneas hasta el límite de la altura en una columna y solo entonces seguirá con la siguiente.

Si vienes de documentación antigua o de proyectos legacy, no te olvides de los prefijos. Durante un tiempo fueron comunes -moz- para Gecko (Firefox) y -webkit- para WebKit/Blink en propiedades como columns o column-fill. Hoy en día la necesidad es menor, pero en entornos corporativos con navegadores 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;
}

Vyberte si „Salida“ a „Output“ a vyberte si z nich: si todas las columnas tienen una altura podobné (zostatok) o si seno columnas finales vacías oa medio llenar (auto). Esa observación visual es la pista más rápida para cancelar que tu declaración se está aplicando como esperas.

Kompatibilita medzi navegadormi, históriou a rekurzom

Moderná podpora stĺpcov v navegadoroch a ampliónoch, jedinečných historických dôkazoch. Durante años, Firefox fue el que ofreció un compportamiento más konzistentné s el equilibrio a contenedores con altura fija, mientras que otros navegadores, al enfrentarse a esa restricción, tendían a rellenar de forma secuencial. Pre „sekundárne skúsenosti“ vo Firefoxe je možné vyplniť stĺpce: auto.

K dispozícii je tempo, strata motorov WebKit/Blink fueron alineándose. Se observó disponibilidad práctica de los valores hacia versiones de mediados de la década pasada, con notas como que, en ciertos momentos, cambiar la propiedad en caliente no updated el layout hasta forzar una recalculación. Esa trieda detalles de implementación ha ido puliéndose, pero si trabajas con toggles en vivo no pierdas de vista a necesidad de provocar un relayout si no el el efecto al instante.

Sú uvedené a kompatibilné referencie, brániace sa verziám, ktoré sú podporované. Zvyčajné referenčné čísla sú kompatibilné a sú súčasťou Chrome 50, Edge 12, Firefox 52, Opera 37 a Safari 9. Desať nových čísel, ako sú základné tabuľky, konsolidácia podpory, skutočné nebezpečenstvo, vlajky, implementácie parciales alebo bugs de versiones concretas.

• Google Chrome: 50.0 alebo vyšší.
• Microsoft hrán: 12.0 alebo vyšší.
• Mozilla Firefox: 52.0 alebo vyšší.
• Opera: 37.0 alebo vyšší.
• safari: 9.0 alebo vyšší.

V rámci „balance-all“, aunque la especificación lo contempla para equilibrar todo el contenido en contextos fragmentados, no se encuentra implementado en los navegadores Actuales. Úsalo solo como referencia koncepčný; en producción, limitate a auto y balance.

Klasická dokumentácia pre kompatibilitu s platovou tabuľkou „Môžem použiť...“. Estas tablas se mantienen contribuciones de la comunidad y han sido impulzadas por editores y colaboradores conocidos, con diseño y participación abierta en GitHub. Stratégia dlhu z minulosti ako StatCounter (z prvého, októbrového radu z roku 2025), s geolokalizačnou asistenčnou službou ako ipinfo.io a pruebas de navegador realizadas con herramentas de testeo cruzado.

Si andas migrando un proyecto y necesitas uniformidad con navegadores antiguos, aplica esta receta: conserva prefijos -moz- y -webkit- en columns/column-fill para bases de usuarios legadas, añade un valor por defekto sensato (balance suele ser buena opción visual) y ofrece un “opt-in” a auto cuando la prioridad sea apurar al maximo la altura de las primeras columnas a costa de dejar las últimas más vacías.

Recuerda también que, con altura fija, algunos motores siguen priorizando Decisiones distintas en casos limitte. Prueba contenido real y con textos más largos que una sola page para detectar efectos de fragmentación ako el hecho de que solo la última “página” sa equilibre.

Je to hlboké, dopĺňajú sa rekurzné módy viacerých stĺpcov CSS a referencií DOM. Prejdite na stránky „Viacnásobné stĺpce CSS“ pre zoznam úloh a spojenie s propiedadami a “HTML DOM columnFill property” s manipuláciou s valorizáciou JavaScriptu a vyhadzovaním. Estos recursos te ayudarán a entender como convive column-fill con el resto del ecosistema multicolumna.

Por último, un apunte editorial: cuando leas artículos antiguos, recuerda que en 2014 era frecuente que column-fill no funcionase ako esperabas en ciertos navegadores y que hacia 2015 ya se comprobaba soporte en builds modernas (napr. Chrome 44 entonces). Esa cronología explica por qué verás consejos sobre forzar relayout al cambiar el valor or notas de que solo “funciona en Firefox”; hoy la situación es bastante más uniforme, aunque la herencia histórica sigue asomando en bases de código con prefijos.

Táto stránka je s myšlienkou operátora: rovnováha estétiky a simetrie, auto te da previsibilidad secuencial. Recurre a prefijos solo cuando tu audiencia lo requiera, vigila los contextos fragmentados donde solo el último trozo se equilibra, y no olvides que, si cambias column-fill sobre la marcha, quizá debas forzar un relayout para ver el. Con estas claves, tus diseños multicolumna quedarán sólidos y fáciles de mantener.