Własność CSS column-fill określa, czy treść kolumn w układzie wielokolumnowym CSS ma być rozmieszczona równomiernie między kolumnami.
Wartości i składnia
Własność column-fill
jako wartość przyjmuje jedno z następujących słów kluczowych:
auto
- Kolumny są wypełniane sekwencyjnie.
balance
- Treść w kolumnach jest w miarę możliwości rozkładana równomiernie. W kontekstach fragmentarycznych, na przykład stronicowanych, równomiernie rozmieszczona zostaje tylko treść w ostatnim fragmencie.
balance-all
- Treść w kolumnach jest w miarę możliwości rozkładana równomiernie. W kontekstach fragmentarycznych, na przykład stronicowanych, równomiernie rozmieszczona zostaje treść wszystkich fragmentów.
Przykłady
Spójrz na poniższy fragment dokumentu HTML:
<div>
<p>Miałem już sposobność zaznaczyć, jak bardzo zyskuje dzieło Balzaca na ujęciu go z perspektywy całości; to, iż w ostatnich czasach w Polsce genialny ten pisarz budził tak słabe stosunkowo zainteresowanie, ma niewątpliwie przyczynę w okoliczności, iż dawniejsze polskie wydawnictwa w osobliwy sposób pominęły właśnie te utwory, które pozwalają skupić świat Komedii Ludzkiej w organiczną całość.</p>
</div>
Przy takich ustawieniach CSS:
div {
columns: 3;
width: 450px;
column-fill: balance;
}
…ten element będzie wyglądał tak:

Jeśli natomiast zmienimy wartość własności column-fill
na auto
, to przeglądarka będzie rozmieszczać treść w kolumnach sekwencyjnie, a więc najpierw maksymalnie napełni pierwszą kolumnę, potem drugą itd. Efekt tego będzie taki:

Powodem utworzenia przez przeglądarkę tylko jednej kolumny, mimo że własność columns
ma wartość 3
, jest brak ograniczenia wysokości kontenera wielokolumnowego (elementu div
). W efekcie przeglądarka ma do dyspozycji nieograniczenie długą pierwszą kolumnę, w której mieści się cała treść.
Ograniczenie wysokości elementu div
za pomocą własności height
sprawiłoby, że cała treść przestałaby się mieścić w jednej kolumnie, dzięki czemu przeglądarka zaczęłaby tworzyć następne kolumny, np.:
div {
columns: 3;
width: 450px;
height: 150px;
column-fill: auto;
}
Efekt wprowadzenia tej zmiany jest następujący:

Podsumowanie
Zastosowanie | Kontenery wielokolumnowe |
---|---|
Obsługiwane wartości | Słowa kluczowe auto , balance i balance-all |
Wartość początkowa | balance |
Dziedziczenie | Nie |
Specyfikacja CSS | CSS Multi-column Layout Module Level 1, column-fill |