Własność CSS column-fill

> Dodaj do ulubionych

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:

Efekt działania własności column-fill: balance

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:

Efekt działania własności column-fill: auto

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:

Efekt działania własności column-fill: auto z ograniczeniem wysokości za pomocą własności height

Podsumowanie

ZastosowanieKontenery wielokolumnowe
Obsługiwane wartościSłowa kluczowe auto, balance i balance-all
Wartość początkowabalance
DziedziczenieNie
Specyfikacja CSSCSS Multi-column Layout Module Level 1, column-fill
Jajko z dzwonkiem

Podoba Ci się ta strona?

Pomóż nam się rozwijać, wykupując płatne konto. Dzięki temu będziemy mogli tworzyć dla Ciebie jeszcze więcej ciekawych treści, a Ty pozbędziesz się reklam.