Isi lajur CSS: mengawal isi kandungan dalam kolum

Utama » Python » Isi lajur CSS: mengawal isi kandungan dalam kolum

Jika terdapat pelbagai lajur dalam CSS, tempran atau temprano di atas dengan isian lajur, la propiedad yang boleh membuat keputusan untuk mengisi kandungan dalam kolum. Ciri-ciri keputusan ini adalah untuk mengawal teks el sebaran bentuk keseimbangan o si se llena columna dan columna hasta agotar el espacio o el contenido, algo especialmente penting cuando limitas la altura de un contenedor multicolumna.

Antes de meternos dalam 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 interestantes 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 lajur-isi y cómo reparte el contenido

La propiedad-fill controla el modo en que se rellenan las columnas de un contenedor multicolumna. Lihat 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 similar en la medida de lo possible.

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 (contohnya, la altura) y se pasa a la siguiente, pudiendo quedar columnas posteriores casi vacías o totalmente vacías si no hay suficiente contenido.

Con balance, en cambio, el motor intentará repartir el contenido de forma equitativa entre todas las columnas, lo que suele dar como resultdo alturas visualmente parecidas en cada columna dentro del contenedor. Cuando hay un restriction 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 unos píxeles de altura más en satu sola columna.

Hay un detalle important en contextos fragmentados (contohnya, medios paginados or impresion): 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. Keserasian ini adalah relevan untuk maquetaciones orientadas dan imprimir oa lectores que dividend el flujo en páginas.

La especificación también define un valor llamado balance-all, pensado para equilibrar todas las páginas or fragmentos, tetapi 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, but no lo podrás use en producción sin polyfills or comportamientos alternativos.

Consejo práctico muy útil: cuando estableces un 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) atau más “list” (secuencial), baki kelayakan o auto según te convenga la estética o la legibilidad del bloque.

Sebagai contoh, en un caso típico con una lista larga de elements, 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. Esto era especialmente útil for que Firefox secomportase 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 */
}

Satu analogía sencilla: 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 possible que el último par de vasos se queden a medias o vacíos.

Contoh amalan, sintaksis dan penaung uso

La sintaxis es concisa, ya que solo admite palabras clave. Puedes declararla como column-fill: baki; o isi lajur: auto; y combinarla con cualquier otra propiedad del módulo de multicolumnas: kiraan lajur, lebar lajur, jurang lajur, peraturan lajur, lajur (pendek), dsb.

/* 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. Takrifkan el número de columnas, dales una altura y alterna entre balance y auto untuk menghargai perbezaan seketika:

<!-- 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 detalle puede afectar a la consistencia visual entre páginas, sobre todo si las columnas no están uniformemente cargadas de contenido.

Untuk mencuba gaya hidup "Cuba sendiri", buat contoh ringkas dalam editor di taman permainan dalam talian. Alternar el valor de column-fill y forzar una altura te permitirá percibir cómo cambian los bloques cuando el navegador decide equilibrar or verter en secuencia.

Algo que apareció en experiencias anteriores es que, en ciertas implementaciones, dinamicamente isian lajur cambiar (contohnya, dengan JavaScript) tidak ada aplikasi langsung. Había que forzar un reflujo/relayout for que el motor recalculara la disposición. Jika anda berjaya, anda boleh menulis klasik dan menulis satu propiedad untuk aliran semula yang kuat atau gaya pengiraan semula melalui isian lajur kambi.

Más allá de lajur-fill, conviene tener a mano las propiedades relacionadas del módulo multicolumnas. column-count establece cuántas columnas genera el contenedor, lebar lajur menentukan el ancho ideal de cada columna y columns es el shorthand que acepta ambos. ruang-jurang marca el espacio entre columnas y column-rule pinta satu “regla” atau línea separadora entre ellas.

• kiraan lajur: número de columnas deseado.
• lebar lajur: ancho objetivo de cada columna.
• lajur: abreviatura que combina count y width.
• ruang-jurang: separación horizontal entre columnas.
• peraturan lajur: trazo entre columnas (ancho/estilo/color).

Cuando el contenedor tiene un altura fija, la interacción entre lajur-isi y lajur-kiraan/lebar-lajur tidak banyak. keseimbangan 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 satu 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- untuk Gecko (Firefox) y -webkit- untuk WebKit/Blink en propiedades como columns or column-fill. Hoy en día la necesidad es menor, but 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;
}

Pada "Salida" dan "Output", anda perlu membuat pemangkasan, lihat dalam keadaan berikut: si todas las columnas tienen una altura similar (balance) or si hay columnas finales vacías oa medio llenar (auto). Esa observación visual es la pista más rápida for confirmar que tu declaración se está aplicando como esperas.

Keserasian entre navegadores, sejarah dan berulang

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 contendores con altura fija, mientras que otros navegadores, al enfrentarse a esa restrictción, tendían a rellenar de forma secuencial. Untuk melihat "pengalaman secuencial" dalam Firefox, lihat isian lajur: auto.

Con el tiempo, los motores WebKit/Blink fueron alineándose. Memerhatikan amalan disponibilidad 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 un recalculación. Ini adalah butiran terperinci pelaksanaan yang boleh digunakan, tetapi ia boleh bertukar-tukar dalam vivo tiada pierdas de vista la perlu provocar dan relayout untuk kesan langsung.

Jika terdapat rujukkan keserasian, encontramos umbrales de versiones donde la propiedad figura como soportada. Kebiasaan rujukan kesesuaian dengan bahagian Chrome 50, Edge 12, Firefox 52, Opera 37 dan Safari 9. Sepuluh en cuenta que son números guía basados ​​en tablas de soporte consolidadas y que, en entornos reales, pueden influir flags, implementaciones parciales or bugs de versiones concretas.

• Google Chrome: 50.0 atau lebih tinggi.
• Microsoft Edge: 12.0 atau lebih tinggi.
• Mozilla Firefox: 52.0 atau lebih tinggi.
• beroperasi: 37.0 atau lebih tinggi.
• Safari: 9.0 atau lebih tinggi.

En cuanto a “balance-all”, aunque la especificación lo contempla para equilibrar todo el contenido en contextos fragmentados, tiada se encuentra implementado en los navegadores actuales. Úsalo solo como referencia conceptual; dalam pengeluaran, hadkan baki auto y.

Un clásico de la documentación sobre compatibilidad es la plataforma de tablas “Bolehkah saya menggunakan…”. 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 (contohnya, series de octubre de 2025), con geolocalización asistida por servicios como ipinfo.io y pruebas de navegador realizadas con herramientas de testeo cruzado.

Jika anda berhijrah un proyecto y memerlukan uniformidad con navegadores antiguos, aplica esta receta: conserva prefijos -moz- y -webkit- en lajur/lajur-isi untuk asas 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 máximo 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 límite. Prueba contenido real y con textos más largos que una sola página for detectar efectos de fragmentación como el hecho de que solo la última “página” se equilibre.

Jika anda ingin mengetahui secara mendalam, pelengkap dengan pengulangan modul multikolum CSS dan rujukan DOM. Buka halaman "CSS Multiple Columns" untuk memulihkan semua perkara yang berkaitan dengan propiedades y el “HTML DOM columnFill property” untuk memanipulasi keberanian daripada JavaScript dalam tempoh pengeluaran. Ia akan kembali kepada ayudarán dan entender cómo convive column-fill con el resto del ecosistema multicolumna.

Oleh itu, editorial yang lengkap: 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 menyokong dan membina moden (contohnya, 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.

Si te quedas con una idea operativa: baki estética y simetría, auto te da previsibilidad secuencial. Berulang 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 for ver el efecto. Con estas claves, tus diseños multicolumna quedarán sólidos y faciles de mantener.