CSS કૉલમ-ભરો: કૉલમના કોન્ટેનિડો અને કૉલમને નિયંત્રિત કરો

મુખ્ય પૃષ્ઠ » પાયથોન » CSS કૉલમ-ભરો: કૉલમના કોન્ટેનિડો અને કૉલમને નિયંત્રિત કરો

Si trabajas con diseños de varias columnas en CSS, tarde o temprano te toparás con column-fill, la propiedad que decend cómo se reparte el contenido entre esas columnas. Esta caracteristica 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 define a través de palabras clave y que su valor inicial es balance. Es decir, por defecto 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 cómo reparte el contenido

La propiedad column-fill controla el modo en que se rellenan las columnas de un contenedor multicolumna. Se especifica mediante valores por palabra clave y su valor por defecto es balance, lo que implica que el navegador intentará que todas las columnas queden con una cantidad de contenido સમાન en la medida de lo posible.

Los dos valores relevantes implementados en navegadores son auto y balance. Con auto, el contenido se 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.

બેલેન્સ વિના, ફેરફાર સાથે, el motor intentará repartir el contenido de forma equitativa entre todas las columnas, lo que suele dar como resultado alturas visualmente parecidas en cada columna dentro del contenedor. Cuando hay una retricció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 horizontal sobre rascar de unosílelum enosíla encola pénére.

Hay un detalle importante en contextos fragmentados (por ejemplo, medios paginados o impresión): સોલો એલ અલ્ટીમો ફ્રેગમેન્ટો સે ઇક્વિલિબ્રા. Es decir, si el contenido se reparte en varias páginas, el equilibrio se aplica únicamente en la última de ellas, no en todas. Este comportamiento es relevante para maquetaciones orientadas a imprimir oa lectores que dividen el flujo en páginas.

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

Consejo rá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” (equilibrado) o más “lista” (secuencial), એલિજિએન્ડો બેલેન્સ ઓ ઓટો સેગન ટે કોન્વેન્ગા લા એસ્ટેટિકા ઓ લા લેજીબિલિડેડ ડેલ બ્લોક.

Por ejemplo, en un caso típico con una lista larga de elementos, 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 a 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. Esto era especialmente útil para que Firefox se comportase igual que otros navegadores cuando el contenedor tenía altura fija, puesto que Firefox tendía a equilibrar automáticamente en dichas situaciones:

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

એક સમાનતા: કલ્પના ક્યુ સિર્વેસ ઝુમો એન વેરિઓસ વાસોસ. કોન બેલેન્સ, ઇન્ટેન્ટસ ક્યુ કેડા વાસો ટેંગા ઉના કેન્ટીદાદ પેરેસીડા, ઔનક્યુ એસો સિગ્નિફિક ક્યુ નિન્ગુનો લેગ્યુ જસ્ટો અલ બોર્ડે. 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 practicos, sintaxis y patrones de uso

La sintaxis es concisa, ya que solo admite palabras clave. Puedes declararla como column-fill: balance; o column-fill: auto; y combinarla con cualquier otra propiedad del módulo de multicolumnas: કૉલમ-કાઉન્ટ, કૉલમ-પહોળાઈ, કૉલમ-ગેપ, કૉલમ-નિયમ, કૉલમ (શોર્ટહેન્ડ), વગેરે.

/* 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. el número de columnas, dales una altura y alterna entre balance y auto વ્યાખ્યાયિત કરો પેરા apreciar la diferencia 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 */
}

En entornos con paginación o impresión (contextos fragmentados), recuerda el matiz: સોલો સે ઇક્વિલિબ્રા એલ અલ્ટીમો ફ્રેગમેન્ટો. Si estás maquetando un folleto o un informe que vaya a papel, este detalle puede afectar a la consistencia visual entre páginas, sobre todo si las columnas no están uniformemente cargadas de contenido.

para probarlo en vivo al estilo “તે જાતે અજમાવી જુઓ”, cre un ejemplo rápido en tu editor o en un playground online. વૈકલ્પિક અલ વીરતા દ કૉલમ-ફિલ વાય ફોરઝાર ઉના અલ્ટુરા ટે પરમિટિરા પરસિબિર કોમો કેમ્બિયન લોસ બ્લોક્સ cuando el navegador 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 motor recalculara la dispositión. Si te sucede, un truco clásico es leer y escribir una propiedad que fuerce reflow o recalcular estilos tras cambiar column-fill.

Más allá de column-fill, conviene tener a mano las propiedades relacionadas del módulo multicolumnas. કૉલમ-કાઉન્ટ establece cuántas columnas genera el contenedor, કૉલમ-પહોળાઈ વ્યાખ્યાયિત કરો el ancho ideal de cada columna y columns es el shorthand que acepta ambos. column-gap marca el espacio entre columnas y column-rule pinta una “regla” o línea separadora entre ellas.

• કૉલમ-ગણતરી: número de columnas deseado.
• કૉલમ-પહોળાઈ: ancho objetivo de cada columna.
• કૉલમ: સંક્ષિપ્ત ક્યુ સંયોજન ગણતરી y પહોળાઈ.
• સ્તંભ-અંતર: વિભાજન આડી પ્રવેશ કૉલમ.
• સ્તંભ-નિયમ: trazo entre columnas (ancho/estilo/color).

Cuando el contenedor tiene una altura fija, la interacción entre column-fill y column-count/column-width se nota muchísimo. બેલેન્સ tratará de que todas las columnas terminen con alturas parecidas, aunque ninguna acabe tocando el borde inferior exacto; auto, en cambio, apilará lineas 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 colum-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;
}

En cuanto a “Salida” u “આઉટપુટ”, cuando hagas pruebas, fíjate en dos cosas: si todas las columnas tienen una altura similar (balance) o si hay columnas finales vacías oa medio llenar (auto). Esa અવલોકન દ્રશ્ય es la pista más rápida para confirmar que tu declaración se está aplicando como esperas.

Compatibilidad entre navegadores, historia y recursos

El soporte moderno de column-fill en los navegadores es amplio, aunque su historia viene con matices. Durante años, Firefox fue el que ofreció un comportamiento más consistente con el equilibrio en contenedores con altura fija, mientras que otros navegadores, al enfrentarse a esa retricción, tendían a rellenar de forma secuencial. Para forzar la “experiencia secuencial” en Firefox, podías fijar column-fill: auto.

Con el tiempo, los motores 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 actualizaba el layout hasta forzar una recalculación. Esa clase de detalles de implementación ha ido puliéndose, pero si trabajas con toggles en vivo no pierdas de vista la necesidad de provocar un relayout si no ves el efecto al instante.

સી એટેન્ડેમોસ એ રેફરન્સીસ ડી કોમ્પેટીબિલિડેડ, એન્કોન્ટ્રામોસ અમ્બ્રેલ્સ ડી વર્ઝનેસ ડોન્ડે લા પ્રોપીડેડ ફિગ્યુરા કોમો સોપોર્ટડા. ક્રોમ 50, એજ 12, ફાયરફોક્સ 52, ઓપેરા 37 અને સફારી 9 સાથે સુસંગત રહેવાની આદત. Ten en cuenta que son números guía basados ​​en tablas de soporte consolidadas y que, en entornos reales, pueden influir flags, implementaciones parciales o bugs de versiones concretas.

• ગૂગલ ક્રોમ: ૭.૦ કે તેથી વધુ.
• માઈક્રોસોફ્ટ એડ: ૭.૦ કે તેથી વધુ.
• મોઝીલા ફાયરફોક્સ: ૭.૦ કે તેથી વધુ.
• ઓપેરા: ૭.૦ કે તેથી વધુ.
• સફારી: ૭.૦ કે તેથી વધુ.

En cuanto a “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 conceptual; ઉત્પાદનમાં, સ્વયંસંચાલિત સંતુલન મર્યાદિત કરો.

Unclásico de la documentación sobre compatibilidad es la plataforma de tablas “શું હું ઉપયોગ કરી શકું…”. Esta tablas se mantienen con contribuciones de la comunidad y han sido impulsadas por editores y colaboradores conocidos, con diseño y participación abierta en GitHub. Los datos de cuota de uso suelen provenir de fuentes como StatCounter (por ejemplo, series de octubre de 2025), con geolocalización asistida por servicios como ipinfo.io y pruebas de navegador realizadas de herramuzados con herramuzados test.

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 defecto 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 dejar las últimas másás.

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

Si quieres profundizar, complementa con recursos del módulo de multicolumnas de CSS y referencias del DOM. "CSS મલ્ટીપલ કૉલમ્સ" માટેના બધા પૃષ્ઠો y el "HTML DOM કૉલમફિલ પ્રોપર્ટી" si manipulas el valor desde JavaScript en tiempo de ejecución. Estos recursos te ayudarán a entender cómo convive column-fill con el resto del ecosistema multicolumna.

સંપૂર્ણ રીતે, એક સંપાદકીય સંપાદકીય: cuando leas artículos antiguos, recuerda que en 2014 era frecuente que column-fill no funcionase como esperabas en ciertos navegadores y que hacia 2015 ya se comprobaba soporte en builds modernas (por ejemplo, Chrome 44 entonces). Esa cronología explica por qué verás consejos sobre forzar relayout al cambiar el valor o 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.

Si te quedas con una idea operativa: બેલેન્સ ઓફ રેસ એસ્ટેટિકા વાય સિમેટ્રિયા, ઓટો તે દા પ્રીવિઝિબિલિડેડ સિક્યુએન્સિયલ. પુનરાવર્તિત કરો એક પ્રિફિજોસ સોલો ક્યુઆન્ડો તુ ઓડિયન્સિયા લો રિક્વીરા, વિજિલા લોસ કોન્ટેક્સ્ટસ ફ્રેગમેન્ટડોસ ડોન્ડે સોલો અલ અલ્ટિમો ટ્રોઝો સે ઇક્વિલિબ્રા, વાય નો ઓલ્વિડ્સ ક્યુ, સી કેમ્બિયાસ કોલમ-ફિલ સોબ્રે લા માર્ચા, ક્વિઝા ડેબાસ ફોરઝાર અન રિલેઆઉટ. Con estas claves, tus diseños multicolumna quedarán sólidos y faciles de mantener.