CSS-kolonnefyll: Kontroller som kan brukes til å dele innholdet i kolonnene

Hjem » Python » CSS-kolonnefyll: Kontroller som kan brukes til å dele innholdet i kolonnene

Si trabajas con diseños de varias columnas en CSS, tarde eller temprano te toparás con column-fill, la propiedad que bestemme cómo 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 viktige cuando limitas la altura de un contenedor multicolumna.

Antes de meternos en harina, conviene sabre que column-fill definerer en 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 kolonne-fyll og cómo dele 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 lignende 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 suuiente, pudiendo quedar columnas posteriores casi vacías eller totalmente vacías si no hay suficiente contenido.

Med balanse, en endring, 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 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 horisontal sobre rascar unos píxeles de altura más en una sola columna.

Hay un detalle importante en contextos fragmentados (for eksempel, medios sidedos eller impresión): solo el último fragmento se equilibra. 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 definere un valor lalamado balance-all, pensado para equilibrar todas las paginas o fragmentos, pero hoy por hoy no cuenta con soporte en los navegadores principales. Es util conocerlo por si lov ves en documentación o en el estándar, men ingen lo podrás bruker en producción sin polyfills eller comportamientos alternativos.

Consejo práctico muy outil: cuando estableces una altura a un contenedor multicolumna, el effekten av kolonnefyllingen kan se mye mer bevis. Si marcas una altura concreta, puedes forzar un comportamiento más "revista" (equilibrado) eller más "lista" (secuencial), eligiendo balanse o auto según te convenga la estética o la legibilidad del bloque.

Por ejemplo, en un caso típico con una liste larga de elementos, podrias 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 en kolonnefylling: auto. Esto especialmente util para que 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 */
}

En stive analogi: imagina que sirves zumo en varios vasos. Med balanse, 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 mulig que el último par de vasos se queden a medias o vacíos.

Eksempler prácticos, sintaxis og patrones de uso

La sintaxis es concisa, ya que solo admite palabras clave. Puedes declararla como kolonne-fyll: balanse; o kolonnefyll: auto; y combinarla con cualquier otra propiedad del módulo de multicolumnas: kolonnetelling, kolonnebredde, kolonne-gap, kolonne-regel, kolonner (shorthand), etc.

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

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

Si quieres ver un ejemplo minimo, prueba con un bloque de texto y dos o tres columnas. Definer kolonnenummeret, det er en altura og en alternativ balanse og automatisk for apreciar la diferencia al 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 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 detalj puede afectar a la consistencia visual entre páginas, sobre todo si las columnas no están uniformemente cargadas de contenido.

For probarlo en vivo al estilo "Prøv det selv", lage et eksempel på en redaktør eller en lekeplass online. Alternar el valor de column-fill y forzar una altura te permitirá percibir cómo cambian los bloques cuando el navegador bestemme equilibrar o verter en secuencia.

Algo que apareció en experiencias anteriores es que, en ciertas implementaciones, cambiar kolonnefyll dinámicamente (for eksempel, med JavaScript) no siempre aplicaba al instante. Había que forzar un reflujo/relayout for que el motor recalculara la disposición. Når du følger, en truco clasico es leer y escribir una propiedad que fuerce reflow eller recalcular estilos tras cambiar column-fill.

Allás søylefylling, gir deg mulighet til å gjenopprette flere kolonner. kolonne-antall opprettet cuántas columnas genera el contenedor, kolonnebredde definerer den ideelle ancho-kolonnen og kolonnene es el stenografi que acepta ambos. kolonne-gap marca el espacio entre columnas y column-regel pinta una "regla" eller linea separadora entre ellas.

• kolonneantall: nummero de columnas deseado.
• kolonnebredde: ancho objetivo de cada columna.
• kolonner: abreviatura que combina count y width.
• kolonnegap: separación horisontale entre columnas.
• kolonneregel: trazo entre columnas (ancho/estilo/farge).

Cuando el contenedor tiene una altura fija, la interacción entre column-fill y column-count/column-width se not muchísimo. balanse tratará de que todas las columnas terminen con alturas parecidas, aunque ninguna acabe tocando el borde inferior exacto; auto, en cambio, apilará líneas hasta el límite de la altura en una columna y solo entonces seguirá con la suuiente.

Si vienes de documentación antigua o de proyectos arv, ingen te olvides de los prefijos. Durante un tiempo fueron comunes -moz- for Gecko (Firefox) og -webkit- for WebKit/Blink en propiedades som kolonner eller kolonnefylling. Hoy en día la necesidad es menor, men 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" eller "Output", cuando hagas pruebas, fíjate en dos cosas: si todas las columnas tienen una altura lignende (balanse) o si hay columnas finales vacías oa medio llenar (auto). Esa observación visual es la pista más rápida para confirmar que tu declaración se está aplicando como esperas.

Kompatibilitet for navegadorer, historie og midler

El soporte moderno de column-fill en los navegadores es amplio, aunque su history viene con matices. Durante años, Firefox-fuel el que ofreció un comportamiento mer konsistent con el equilibrio en contenedores con altura fija, mientras que otros navegadores, al enfrentarse a esa restricción, tendían a rellenar de forma secuencial. For forzar la "experiencia secuencial" i Firefox, fyll i kolonner: automatisk.

Med tid, los motorer WebKit/Blink fueron alineándose. Se iaktta practica de los valores hacia versjoner av mediados de la década pasada, con nots 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 har 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.

Si atendemos a referencias de compatibilidad, encontramos umbrales de versiones donde la propiedad figura como soportada. Vanlige referanser er kompatible med Chrome 50, Edge 12, Firefox 52, Opera 37 og Safari 9. Ten en cuenta que son números guía basados ​​en tablas de soporte consolidadas y que, en entornos reales, pueden influir flagg, implementaciones parciales eller bugs de versiones concretas.

• Google Chrome: 50.0 eller høyere.
• Microsoft Edge: 12.0 eller høyere.
• Mozilla Firefox: 52.0 eller høyere.
• Opera: 37.0 eller høyere.
• Safari: 9.0 eller høyere.

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 konseptuell; en produksjon, begrense en automatisk balanse.

En clásico de la documentación sobre compatibilidad es la plataforma de tabeller "Kan jeg bruke ...". Estas tablas se mantienen contribuciones de la comunidad y han sido impulsadas por editores y colaboradores conocidos, con diseño y participación abierta en GitHub. Los data de cuota de uso suelen provenir de fuentes como StatCounter (for eksempel, serie de octubre de 2025), med geolocalización asistida por servicios como ipinfo.io y pruebas de navegador realizadas con herramientas 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 for baser 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 maksimal 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 seguen priorizando decisiones distintas en casos límite. Prueba 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 likevekt.

Si quieres profundizar, komplementer til gjenoppbygging av multicolumnas av CSS og referanser til DOM. Busca las páginas de "CSS Multiple Columns" for en repaso de todo el conjunto de propiedades og "HTML DOM columnFill-egenskapen" er manipulasjoner av valor desde JavaScript og tide dejecución. Dette er en rekurs som kan gi kolonnefylling med en resto del økosystem multicolumna.

Til slutt, en apunte redaksjonell: 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 (for eksempel, Chrome 44 entonces). Dette er en kronologisk forklaring på hva som er mulig å finne relayout på en måte som kan brukes som 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 en idé operativa: balanse av mottak estética y simetría, auto te da previsibilidad secuencial. Gjenta en 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 efecto. Med estas claves, tus diseños multicolumna quedarán sólidos y faciles de mantener.