Riempimento colonne CSS: controlla come riprodurre il contenuto in colonne

Casa » Python » Riempimento colonne CSS: controlla come riprodurre il contenuto in colonne

Se lavori con design di varie colonne in CSS, tardi o tempo dovrai iniziare con il riempimento delle colonne, la capacità di decidere come rispondere al contenuto tra quelle colonne. Questa caratteristica risulta essere una chiave per controllare se il testo viene distribuito in modo equilibrato o se si riempie una colonna o una colonna finché non si accede allo spazio o al contenuto, qualcosa di particolarmente importante quando si limita l'altezza di un contenitore a più colonne.

Prima dei metri in bocca, conviene sapere che il riempimento della colonna viene definito attraverso le parole chiave e che il suo valore iniziale è equilibrio. Lo dici, per difetto i navigatori cercheranno di equilibrare la quantità di contenuti in ogni colonna; tuttavia, ci sono argomenti interessanti quando si entra nel gioco alture fijas, contesti frammentati come la stampa o l'impaginazione e le peculiarità storiche del supporto tra i navigatori.

Cos'è il riempimento delle colonne e come rispondere al contenuto

La funzionalità di riempimento colonna controlla la modalità in cui vengono riempite le colonne di un contenitore a più colonne. Se especifica mediante valori por palabra clave y su valor por defetto es equilibrio, ciò implica che il navigatore cercherà di fare in modo che tutte le colonne contengano una quantità di contenuti simili nel mezzo del possibile.

I due valori rilevanti implementati nei navigatori sono automatici e bilanciati. Con auto, il contenuto è vierte de manera secuencial: se riempie la prima colonna fino a raggiungere il limite (ad esempio, l'altezza) e passa alla successiva, potendo lasciare le colonne posteriori quasi vuote o completamente vuote se il contenuto non è sufficiente.

Con balance, en cambio, il motore cercherà di riprodurre il contenuto in forma equitativa tra tutte le colonne, lo que suele dar come risultato altezze visivamente parecide in ciascuna colonna all'interno del contenitore. Quando c'è una restrizione dell'altezza, questa strategia può far sì che l'ultima linea di una colonna non si allontani dal bordo inferiore del contenitore: il navigatore dà priorità all'equilibrio orizzontale sopra il raschiare uno dei pixel di altezza più alti su una sola colonna.

Ci sono dettagli importanti in contesti frammentati (ad esempio, pagine o stampe): solo l'ultimo frammento si equilibra. Es dir, se el contenido se reparte en varias páginas, el equilibrio se aplica únicamente in l'última de ellas, no en todas. Questo comportamento è rilevante per le combinazioni orientate a stampare i lettori che dividono il flusso nelle pagine.

La specifica definisce anche un valore chiamato Balance-All, pensato per equilibrare tutte le pagine o i frammenti, ma oggi non ho più il supporto dei principali navigatori. È utile conoscerlo se lo vedi nella documentazione o nello standard, ma non potrai usarlo in produzione senza polyfill o comportamenti alternativi.

Consiglio pratico molto utile: quando si stabilisce un'altezza su un contenitore multicolonna, l'effetto di riempimento colonna appare molto più evidente. Se si marca un'altura concreta, si può forzare un comportamento più “revista” (equilibrato) o più “lista” (secuencial), scegliendo l'equilibrio o l'auto según te convenga l'estetica o la leggibilità del blocco.

Ad esempio, in un caso tipico con una lunga lista di elementi, potresti provare qualcosa come (fissato nell'uso dei prefijos per ambienti antichi e nell'altezza forzata): questo modello storico aiuta a scoprire i motori basati su WebKit e Gecko delle versioni precedenti.

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

Negli scenari in cui vuoi imitare il comportamento di riempimento sequenziale, è possibile alternare il riempimento di una colonna: auto. Questo era particolarmente utile affinché Firefox si comportasse allo stesso modo degli altri navigatori quando il contenitore aveva un'altezza fissa, poiché Firefox tendeva a equilibrarsi automaticamente in queste situazioni:

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

Una analogía sencilla: immagina che sirves zumo en varios vasos. Con equilibrio, intendo che ogni vaso tenga una quantità di parecida, anche se questo significa che ninguno llegue justo al borde. Con auto, riempie un vaso hasta arriba, luego el siguiente, e così sucesivamente hasta que te quedas sin zumo; è possibile che l'ultimo paio di vasi si riempia di mezzo del vuoto.

Esempi pratici, sintassi e patroni dell'uso

La sintassi è concisa, poiché solo le parole chiave sono ammesse. Puoi dichiararla come column-fill: balance; o riempimento colonne: automatico; e combinarla con qualsiasi altra proprietà del modulo multicolonna: conteggio delle colonne, larghezza delle colonne, gap delle colonne, regola delle colonne, colonne (abbreviazione), ecc.

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

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

Se vuoi vedere un esempio minimo, prova con un blocco di testo e due o tre colonne. Define el número de columns, das una altura y alterna entre balance y auto per apprezzare la differenza al momento:

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

Nell'ambito dell'impaginazione o della stampa (contesti frammentati), ricorda il formato: solo se equilibra l'ultimo frammento. Se stai creando un opuscolo o un'informazione che vai su carta, questi dettagli possono influenzare la coerenza visiva tra le pagine, sopra tutto se le colonne non sono uniformemente caricate del contenuto.

Per provare dal vivo lo stile “Provalo tu stesso”, crea un esempio rapido nel tuo editor o in un parco giochi online. Alternare il valore di riempimento colonna e forzare un'altezza ti permetterà di capire come cambiare i blocchi quando il navigatore decide di equilibrare il vertice in sequenza.

Qualcosa che è apparso nelle esperienze precedenti è che, in alcune implementazioni, cambiare il riempimento delle colonne dinamicamente (ad esempio, con JavaScript) non sempre applicato al momento. Bisogna forzare un reflusso/relè per far sì che il motore ricalcoli la disposizione. Se succede, un trucco classico è leggere e scrivere una proprietà che forza il riflusso o il ricalcolo degli stili per cambiare il riempimento della colonna.

Oltre a Column-Fill, conviene avere a mano le proprietà relative al modulo multicolonna. il conteggio delle colonne è stabile nel numero di colonne generate dal contenitore, la larghezza della colonna definisce l'ancoraggio ideale per ogni colonna e le colonne sono la scorciatoia che accetta entrambe. column-gap contrassegna lo spazio tra le colonne e la colonna-rule definisce una "regla" o una linea separatrice tra esse.

• column-count: numero di colonne desiderate.
• larghezza della colonna: anch'io obiettivo di ogni colonna.
• colonne: abbreviazione che combina count y width.
• colonna-gap: separazione orizzontale tra le colonne.
• regola della colonna: trazo entre columnas (ancho/estilo/color).

Quando il contenitore ha un'altezza fissa, l'interazione tra riempimento-colonna e conteggio-colonna/larghezza-colonna non è molto significativa. Balance tratará de que todas las Columnas terminen con alturas parecidas, aunque ninguna acabe tocando el borde inferior stricto; in cambio, le linee verranno visualizzate fino al limite dell'altezza in una colonna e solo allora seguirai il successivo.

Se vienes de documentación antigua o de proyectos legacy, no te olvides de los prefijos. Durante un tempo fueron comunes -moz- per Gecko (Firefox) e -webkit- per WebKit/Blink in proprietà come colonne o riempimento colonne. Oggi la necessità è minore, ma in ambienti aziendali con navigatori disattivati ​​continuano a essere utili.

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

Durante le prove, esegui due operazioni: si todas las columnas tienen una altura similar (balance) o si hay columnas finales vacías oa medio llenar (auto). Questa osservazione visiva è la traccia più rapida per confermare che la tua dichiarazione si sta applicando come esperas.

Compatibilità tra navigatori, storia e ricorsi

El soporte moderno de column-fill en los navegadores è ampio, anche se la sua storia viene con matics. Nel corso degli anni, Firefox è stato quello che ha offerto un comportamento più coerente con l'equilibrio dei contenitori con l'altezza fissa, mentre gli altri navigatori affrontano questa restrizione, devono riempirsi in modo sequenziale. Per forzare l'esperienza sequenziale su Firefox, puoi impostare il riempimento della colonna: auto.

Con il tempo, i motori WebKit/Blink si sono allontanati. Hai osservato la disponibilità pratica dei valori verso le versioni dei media del decennio trascorso, con nota come, in certi momenti, cambiare la proprietà in caldo non aggiornava il layout prima di forzare un ricalcolo. Questa classe di dettagli di implementazione è stata pulita, ma se si lavora con i toggle in vivo non si perde la vista sulla necessità di provocare un relè se non si vede l'effetto al momento.

Si atendemos a referencias de compatibilidad, encontramos umbrales de versionis donde la propiedad figura como portada. Le cifre di riferimento abituali sono la massima compatibilità da Chrome 50, Edge 12, Firefox 52, Opera 37 e Safari 9. Tieni presente che i numeri della guida sono basati su tabelle di supporto consolidate e che, in ambienti reali, puoi influenzare flag, implementazioni parziali o bug di versioni concrete.

• Google Chrome: 50.0 o superiore.
• Microsoft Edge: 12.0 o superiore.
• Mozilla Firefox: 52.0 o superiore.
• Opera: 37.0 o superiore.
• Safari: 9.0 o superiore.

In quanto a “bilanciare tutto”, anche se la specificazione lo contempla per equilibrare tutto il contenuto in contesti frammentati, non è stato implementato nei navigatori attuali. Úsalo solo come riferimento concettuale; nella produzione, limitare l'auto e bilanciare.

Un classico della documentazione sulla compatibilità è la piattaforma delle tabelle “Posso usare…”. Queste tabelle contengono i contributi della comunità e sono stati impulsi da editori e collaboratori conosciuti, con design e partecipazione aperta su GitHub. Los datos de cuota de uso solelen provengono da fonti come StatCounter (ad esempio, serie di ottobre 2025), con geolocalizzazione assistita da servizi come ipinfo.io e prove di navigazione realizzate con strumenti di test cruzado.

Se andas migrando un proyecto y necesitas uniformidad con navegadores antiguos, aplica esta receta: conserva i prefissi -moz- y -webkit- in columns/column-fill per basi di utenti legati, aggiungi un valore per difetto sensato (il suo saldo è una buona opzione visiva) e offri un "opt-in" all'auto quando la priorità mare apurar al máximo l'altezza delle prime colonne a costa de dejar las últimas más vacías.

Ricordatevi anche che, con l'altezza fissa, alcuni motori continuano a dare priorità a decisioni distinte in casi limitati. Prova con contenuti reali e con testi più lunghi di un'unica pagina per rilevare gli effetti di frammentazione come il fatto che solo l'ultima “pagina” sia in equilibrio.

Se vuoi approfondire, completa le risorse del modulo a più colonne CSS e i riferimenti del DOM. Cerca le pagine di “CSS Multiple Columns” per una risposta a tutto il insieme di proprietà e la “proprietà HTML DOM columnFill” si manipola il valore da JavaScript nel tempo di esecuzione. Queste risorse ti aiuteranno a capire come riempire le colonne con il resto dell'ecosistema multicolonna.

Per ultimo, un punto editoriale: cuando leas artículos antiguos, ricordo che nel 2014 era frequente che column-fill non funzionasse come esperabas en ciertos navegadores y que hacia 2015 ya se comprobaba soporte en builds modernas (por ejemplo, Chrome 44 entonces). Questa cronologia spiega perché troverai consigli su come forzare l'inoltro per modificare il valore o le note su cui funziona solo “Firefox”; oggi la situazione è abbastanza più uniforme, anche se la storia continua asomando in basi di codice con prefijos.

Si te quedas con un'idea operativa: equilibrio offre estetica e simmetria, auto te da previsibilidad secuencial. Ricorri ai prefijos solo quando il tuo pubblico lo richiede, controlla i contesti frammentati dove solo l'ultimo trozo si equilibra, e non dimenticare che, se cambi colonna di riempimento sulla marca, quizá devi forzare un rilancio per vedere l'effetto. Con queste chiavi, i tuoi design multicolonna saranno solidi e facili da mantenere.