Układ wielokolumnowy CSS (ang. multi-column layout lub multicol) to sposób rozmieszczenia treści wybranego elementu HTML w formie kolumn. Dzięki temu wygląda ona podobnie do stron w tradycyjnych gazetach papierowych, na których tekst jest podzielony na łamy o niedużej szerokości, co zwiększa wygodę czytania.
Układ wielokolumnowy różni się od innych metod rozmieszczenia treści dostępnych w CSS tym, że nie zmienia właściwości elementów potomnych kontenera głównego. Wszystkie elementy znajdujące się w kontenerze wielokolumnowym nadal znajdują się w układzie normalnym, który w tym przypadku został jedynie podzielony na kolumny.
Aby podzielić zawartość elementu na kolumny, należy przypisać mu własność column-count
(określa liczbę kolumn, a obliczenie ich szerokości pozostawia przeglądarce) lub column-width (określa szerokość kolumn, a obliczenie ich liczby pozostawia przeglądarce). Kolumny te będą reagowały na zmiany rozmiaru przeglądarki i ilości treści, automatycznie dopasowując się do aktualnych warunków.
Oprócz dwóch wymienionych własności w CSS dostępnych jest jeszcze osiem innych, które służą do pracy z układami wielokolumnowymi. Za ich pomocą można na przykład definiować odstępy między kolumnami, właściwości rozdzielających je linii itd. Poniżej znajduje się lista wszystkich własności służących do pracy z układami wielokolumnowymi CSS:
column-fill
column-gap
column-span
column-rule-color
column-rule-style
column-rule-width
column-rule
column-count
column-width
columns
Ponadto, jako że kolumny w układach wielokolumnowych z technicznego punktu widzenia są tzw. fragmentami, do pracy z nimi mogą być przydatne własności z modułu CSS Fragmentation Module Level 3:
W tym rozdziale nauczysz się tworzyć układy wielokolumnowe CSS za pomocą dwóch wymienionych zestawów własności CSS. Zaczniemy od najbardziej podstawowej czynności, czyli podzielenia treści elementu na kolumny.
Definiowanie kolumn
Jak już wiesz, aby podzielić treść na kolumny, zawierającemu ją elementowi należy przypisać własność column-count
lub column-width
o wartości innej niż auto
. To spowoduje, że element ten stanie się kontenerem wielokolumnowym i cała jego zawartość zostanie podzielona na kolumny.
Pierwsza wymieniona własność, column-count
, określa ile kolumn o takiej samej szerokości chcemy utworzyć, a obliczenie ich konkretnej szerokości pozostawia przeglądarce.
Z kolei druga z nich, column-width
, określa żądaną minimalną szerokość kolumn, a obliczenie ich liczby i dokładnej szerokości pozostawia w gestii przeglądarki. Najpierw zajmiemy się definiowaniem liczby kolumn.
Określanie liczby kolumn
Do określania liczby kolumn służy własność column-count
. Jako wartość przyjmuje ona liczbę całkowitą bez jednostki i dzieli dostępną przestrzeń na dokładnie tyle kolumn o równej szerokości.
Jeśli na przykład szerokość okna wynosi 900, a my własności column-count
nadamy wartość 3
, to przeglądarka utworzy trzy kolumny o szerokości 300 pikseli każda. Jeżeli rozmiar tego okna się zmieni, to kolumny automatycznie się dostosują. Spójrz na poniższy przykład. Zmień szerokość tego elementu, aby przekonać się, że liczba kolumn pozostanie taka sama, a zmianie ulegnie tylko ich szerokość:
Powieść niniejsza jest pierwszym ogniwem cyklu, który znowuż stanowi jak gdyby rodzaj kręgosłupa dla całości Komedii Ludzkiej Balzaca, łącząc jej mniej lub więcej luźne żebrowania.
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ść.
Jak gdyby zgodnie z poglądami Balzaca na potężną rolę myśli w całokształcie zjawisk, tłem na którym się rozwija ten centralny niejako cykl powieści – Dwaj poeci, Stracone złudzenia, Cierpienia wynalazcy – jest warsztat myśli ludzkiej, ujęty, jak zawsze u Balzaca, możliwie szeroko, wraz z wszystkim, co doń przynależy: od skromnej drukarenki na prowincji, gdzie samotny myśliciel waży wynalazki mające przetworzyć technikę książki i czasopisma, od ubogiej izdebki paryskiego poddasza, gdzie również myśliciel-asceta poczyna w klasztornej ciszy i skupieniu wielkie dzieła, aż do najjaskrawszych przybytków rozpusty ducha, błyszczącego świata teatrów, dziennika i wielkiego księgarstwa paryskiego. A ten świat, niby tysiącznymi mackami, styka się z dziedziną polityki, finansów, dyplomacji, przemysłu, zbytku, prostytucji i zbrodni.
Aby uzyskać ten efekt, wystarczyło odpowiednio zadeklarować własność column-count
:
div {
column-count: 3;
}
Sam element div
nie wyróżnia się tu niczym szczególnym:
<div>
<h2>Od tłumacza</h2>
<p>Powieść niniejsza jest pierwszym ogniwem cyklu, który znowuż stanowi jak gdyby rodzaj kręgosłupa…</p>
</div>
Teraz przyjrzymy się drugiej metodzie definiowaniu kolumn – przez określenie ich szerokości.
Definiowanie szerokości kolumn
Szerokość kolumn można określić za pomocą własności column-width
, ale jej ustawienie nie jest całkiem „sztywne”. To znaczy, jeśli zadeklarujemy określoną szerokość kolumn, to przeglądarka najpierw obliczy, ile kolumn o takiej szerokości zmieści się w dostępnej przestrzeni, a następnie rozdzieli między nie ewentualną pozostałą ilość miejsca (można powiedzieć, że rozdzieli po równo resztę z dzielenia).
Na przykład, jeśli okno ma 1000 pikseli szerokości, a my własności column-width
nadamy wartość 200px
, to przeglądarka utworzy 5 kolumn o szerokości 200 pikseli każda. Jeśli jednak przy tej samej szerokości okna własności column-width
będzie nadana wartość 300px
, to przeglądarka utworzy trzy kolumny o szerokości po 300 + 100/3 pikseli każda – 3 × 300 = 900, więc pozostaje 100 pikseli do rozdzielenia.
Z drugiej strony, jeśli szerokość kolumny będzie większa od szerokości dostępnej przestrzeni, to przeglądarka utworzy tylko jedną kolumnę o maksymalnej możliwej szerokości.
Spójrz na poniższy przykład. Zmień szerokość tego elementu, aby zobaczyć, jak zmieniają się liczba i czasami szerokość kolumn w reakcji na Twoje działania.
Powieść niniejsza jest pierwszym ogniwem cyklu, który znowuż stanowi jak gdyby rodzaj kręgosłupa dla całości Komedii Ludzkiej Balzaca, łącząc jej mniej lub więcej luźne żebrowania.
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ść.
Jak gdyby zgodnie z poglądami Balzaca na potężną rolę myśli w całokształcie zjawisk, tłem na którym się rozwija ten centralny niejako cykl powieści – Dwaj poeci, Stracone złudzenia, Cierpienia wynalazcy – jest warsztat myśli ludzkiej, ujęty, jak zawsze u Balzaca, możliwie szeroko, wraz z wszystkim, co doń przynależy: od skromnej drukarenki na prowincji, gdzie samotny myśliciel waży wynalazki mające przetworzyć technikę książki i czasopisma, od ubogiej izdebki paryskiego poddasza, gdzie również myśliciel-asceta poczyna w klasztornej ciszy i skupieniu wielkie dzieła, aż do najjaskrawszych przybytków rozpusty ducha, błyszczącego świata teatrów, dziennika i wielkiego księgarstwa paryskiego. A ten świat, niby tysiącznymi mackami, styka się z dziedziną polityki, finansów, dyplomacji, przemysłu, zbytku, prostytucji i zbrodni.
Do uzyskania tego efektu, wystarczyła zamiana poprzedniej deklaracji własności column-count
na poniższą deklarację własności column-width
:
div {
column-width: 180px;
}
Istnieje jeszcze trzeci sposób definiowania kolumn, który stanowi połączenie dwóch poprzednich i opiera się na użyciu własności zbiorczej columns
.
Definiowanie liczby i szerokości kolumn jednocześnie
Własności columns
można używać na dwa sposoby. Pierwszy polega na podaniu jednej wartości, aby określić liczbę lub docelową szerokość kolumn dokładnie tak, jak zrobiłoby się to przy użyciu własności indywidualnej column-count
lub column-width
(pominięta własność zostaje ustawiona na wartość domyślną). Każda z nich przyjmuje inny typ wartości (pierwsza liczbę bez jednostki, a druga liczbę z jednostką), więc przeglądarka będzie „wiedziała”, co ma zrobić w konkretnym przypadku. Na przykład:
div {
columns: 15em;
}
div {
columns: 4;
}
Pierwsza z tych reguł każe przeglądarce wypełnić dostępną przestrzeń kolumnami o szerokości minimum 15em
, a druga – nakazuje utworzenie 4 kolumn o równej szerokości w dostępnej przestrzeni.
Drugi sposób użycia własności columns
polega na podaniu dwóch wartości liczbowych (jedna z jednostką, a druga – bez). W takim przypadku wartość własności column-count
określa maksymalną liczbę kolumn, jaka może zostać utworzona, a własność column-width
działa w normalny sposób do osiągnięcia tej liczby kolumn, po czym już tylko rozdziela nadmiar dostępnego miejsca po równo między istniejące kolumny. Spójrz na poniższą przykładową regułę:
div {
columns: 3 100px;
}
W tym przypadku, zaczynając od szerokości okna mniejszej niż 100 pikseli, najpierw przeglądarka utworzy jedną kolumnę o maksymalnej możliwej szerokości. Gdy szerokość okna będzie stopniowo zwiększana, przeglądarka w miarę możliwości będzie dodawać kolejne kolumny o szerokości 100 pikseli każda. Po osiągnięciu przez okno szerokości 300 pikseli i utworzeniu przez przeglądarkę trzech kolumn, kolejne kolumny już nie będą dodawane, tylko cała nadmiarowa ilość miejsca będzie po równo rozdzielana między te trzy kolumny.
Aby zobaczyć działanie powyższego przykładu w praktyce, zmień szerokość poniższego elementu i obserwuj, co się będzie działo.
Powieść niniejsza jest pierwszym ogniwem cyklu, który znowuż stanowi jak gdyby rodzaj kręgosłupa dla całości Komedii Ludzkiej Balzaca, łącząc jej mniej lub więcej luźne żebrowania.
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ść.
Jak gdyby zgodnie z poglądami Balzaca na potężną rolę myśli w całokształcie zjawisk, tłem na którym się rozwija ten centralny niejako cykl powieści – Dwaj poeci, Stracone złudzenia, Cierpienia wynalazcy – jest warsztat myśli ludzkiej, ujęty, jak zawsze u Balzaca, możliwie szeroko, wraz z wszystkim, co doń przynależy: od skromnej drukarenki na prowincji, gdzie samotny myśliciel waży wynalazki mające przetworzyć technikę książki i czasopisma, od ubogiej izdebki paryskiego poddasza, gdzie również myśliciel-asceta poczyna w klasztornej ciszy i skupieniu wielkie dzieła, aż do najjaskrawszych przybytków rozpusty ducha, błyszczącego świata teatrów, dziennika i wielkiego księgarstwa paryskiego. A ten świat, niby tysiącznymi mackami, styka się z dziedziną polityki, finansów, dyplomacji, przemysłu, zbytku, prostytucji i zbrodni.
Wiesz już, jak podzielić treść elementu na odpowiednią liczbę kolumn o żądanej szerokości, ale to nie wszystko, na co pozwala układ wielokolumnowy CSS. Dodatkowo można zdecydować, jakie mają być odstępy między kolumnami, czy kolumny ma rozdzielać linia oraz czy treść wybranych elementów ma obejmować w poziomie wszystkie kolumny.
Teraz przejdziemy do definiowania odstępów między kolumnami.
Definiowanie odstępów między kolumnami
W pokazanych do tej pory przykładach można zauważyć, że kolumny, niezależnie od ich liczby i szerokości, nie stykają się ze sobą, tylko są od siebie oddalone na pewną odległość. Jest to zasługa domyślnego ustawienia własności column-gap
, która w układzie wielokolumnowym ma wartość domyślną 1em
.
Jeśli chcesz zmienić szerokość odstępu między kolumnami, to możesz własności column-gap
nadać własną wartość w postaci liczby z jednostką długości. Powiedzmy na przykład, że chcemy podzielić treść naszego elementu div
na trzy kolumny odsunięte od siebie na odległość 5em
. Efekt ten uzyskamy za pomocą poniższej reguły CSS:
div {
column-count: 3;
column-gap: 5em;
}
Efekt zastosowania tych ustawień do elementu div
z poprzednich przykładów będzie taki:

Własność column-gap
przyjmuje także wartości procentowe, które odnoszą się do szerokości kontenera wielokolumnowego.
Definiowanie linii między kolumnami
Linie rozdzielające kolumny w układzie wielokolumnowym CSS definiuje się bardzo podobnie, jak obramowanie elementów. Można określić kolor, styl i szerokość osobno za pomocą własności indywidualnych (odpowiednio column-rule-color
, column-rule-style
i column-rule-width
) lub wszystkie te trzy właściwości na raz za pomocą własności zbiorczej column-rule
.
Wszystkie te własności przyjmują takie same wartości i działają w taki sam sposób, jak analogiczne własności obramowania border-color
, border-style
i border-width
. Należy jednak pamiętać, że linia rozdzielająca kolumny pojawia się tylko pośrodku między każdą parą kolumn, a nie na zewnętrznym obramowaniu kolumn lub elementu.
Własności dotyczące linii rozdzielających kolumny definiuje się dla kontenera wielokolumnowego, więc dotyczą one wszystkich kolumn w jednakowym zakresie, tzn. nie ma możliwości zdefiniowania linii o określonych cechach na przykład między pierwszą i drugą kolumną oraz o innych cechach między drugą i trzecią kolumną.
Spójrz na poniższy przykład dotyczący tego samego elementu div
, co poprzednie.
div {
text-align: justify;
columns: 3;
column-gap: 30px;
column-rule: 2px solid red;
}
Ta reguła tworzy trzy kolumny odsunięte od siebie na odległość 30 pikseli, między którymi dodaje ciągłą czerwoną linię o szerokości dwóch pikseli. Wyjustowanie tekstu za pomocą własności text-align
zostało zastosowane tylko po to, aby lepiej uwidocznić, że linie rozdzielające znajdują się dokładnie na środku odstępu dzielącego kolumny. Efekt działania powyższej reguły widać na poniższym zrzucie ekranu.

Ponadto pamiętaj, że linie rozdzielające nie zajmują miejsca między kolumnami, a więc nie rozsuwają ich na boki. Jeśli więc szerokość linii rozdzielającej będzie większa niż szerokość odstępu między kolumnami, to zasłoni ona częściowo zawartość kolumn. Spójrz na poniższy przykład.
div {
text-align: justify;
columns: 3;
column-rule: 3em solid red;
}
W tej regule nie ma deklaracji własności column-gap
, zatem zostanie zastosowana jej wartość domyślna 1em
. Z kolei własności column-rule-width
za pośrednictwem własności zbiorczej column-rule
została nadana wartość 3em
, a więc większa niż szerokość odstępu między kolumnami. To powoduje, że linia rozdzielająca kolumny częściowo nałoży się na zawartość tych kolumn. Widać to na poniższym zrzucie ekranu.

Określanie rozpiętości elementów
We większości dotychczasowych przykładów znajduje się nagłówek h2 o treści „Od tłumacza”, który jest umieszczony na początku pierwszej kolumny. Jeśli się nam to podoba, to możemy to tak zostawić, ale układ wielokolumnowy CSS umożliwia także rozpięcie dowolnego elementu znajdującego się w treści kolumn na szerokość wszystkich kolumn.
Służy do tego własność column-span
, którą należy zdefiniować dla interesującego nas elementu w układzie wielokolumnowym, czyli w naszym przypadku dla elementu nagłówka h2. Spójrz na poniższy przykład dotyczący tego samego kodu HTML, co wcześniej.
div {
columns: 3;
}
h2 {
column-span: all;
padding: 10px;
color: white;
background-color: #347041;
font-family: Verdana;
font-variant: small-caps;
}
p:first-of-type {
margin-top: 0;
}
W regule dotyczącej elementu h2 znajduje się deklaracja własności column-span
o wartości all
, która powoduje, że element ten rozciąga się na szerokość wszystkich kolumn treści. Pozostałe własności w tej regule ustawiają dopełnienie, kolor tekstu, kolor tła oraz właściwości pisma tego nagłówka.
Na końcu znajduje się reguła odnosząca się za pomocą pseudoklasy :first-of-type do pierwszego akapitu w każdym elemencie i likwidująca jego górny margines dla celów estetycznych. Bez niej pierwszy akapit w pierwszej kolumnie byłby odrobinę przesunięty w dół, co zaburzałoby efekt wizualny.
W oknie przeglądarki efekt zastosowania tych reguł byłby następujący:

Własność column-span
jest bardzo prosta i przyjmuje tylko dwie wartości: none
(domyślna) powodującą, że element ogranicza swój zasięg do jednej kolumny, oraz all
, powodującą że element rozciąga się na szerokość wszystkich kolumn.
Oczywiście własność tę można przypisać dowolnemu elementowi w kontenerze wielokolumnowym, nie tylko temu, który znajduje się na samym początku treści. Powiedzmy na przykład, że w naszej treści postanowiliśmy umieścić cytat blokowy w postaci elementu blockquote
, jak poniżej.
<div>
<h2>Od tłumacza</h2>
<p>Powieść niniejsza jest pierwszym ogniwem cyklu, który znowuż stanowi jak gdyby rodzaj kręgosłupa dla całości Komedii Ludzkiej Balzaca, łącząc jej mniej lub więcej luźne żebrowania.</p>
<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>
<blockquote>"A ten świat, niby tysiącznymi mackami, styka się z dziedziną polityki, finansów, dyplomacji, przemysłu, zbytku, prostytucji i zbrodni".</blockquote>
<p>Jak gdyby zgodnie z poglądami Balzaca na potężną rolę myśli w całokształcie zjawisk, tłem na którym się rozwija ten centralny niejako cykl powieści - Dwaj poeci, Stracone złudzenia, Cierpienia wynalazcy - jest warsztat myśli ludzkiej, ujęty, jak zawsze u Balzaca, możliwie szeroko, wraz z wszystkim, co doń przynależy: od skromnej drukarenki na prowincji, gdzie samotny myśliciel waży wynalazki mające przetworzyć technikę książki i czasopisma, od ubogiej izdebki paryskiego poddasza, gdzie również myśliciel-asceta poczyna w klasztornej ciszy i skupieniu wielkie dzieła, aż do najjaskrawszych przybytków rozpusty ducha, błyszczącego świata teatrów, dziennika i wielkiego księgarstwa paryskiego. A ten świat, niby tysiącznymi mackami, styka się z dziedziną polityki, finansów, dyplomacji, przemysłu, zbytku, prostytucji i zbrodni.</p>
</div>
Teraz dodamy zestaw reguł CSS formatujących ten kod HTML.
div {
columns: 3;
font-size: small;
}
h2 {
column-span: all;
padding: 10px;
color: white;
background-color: #347041;
font-family: Verdana;
font-variant: small-caps;
}
blockquote {
column-span: all;
padding: 10px;
color: white;
background-color: #1e6f31;
font-family: Verdana;
font-weight: bold;
text-align: center;
}
p:first-of-type {
margin-top: 0;
}
Efekt działania tego kodu w oknie przeglądarki wygląda następująco:

Wyważanie kolumn
W układzie wielokolumnowym dostępna jest także własność column-fill
, która w kontekście stron internetowych nie ma znaczenia, ale może się przydać podczas pracy w kontekstach fragmentarycznych (np. w druku).
Krótko mówiąc, domyślnie przeglądarka stara się rozmieścić treść w kolumnach jak najbardziej równomiernie. Odpowiada za to domyślna wartość balance
własności column-fill
.
Przy tym ustawieniu w kontekstach fragmentarycznych kolumny są zrównoważone tylko w ostatnim fragmencie (np. na ostatniej stronie wydruku). Aby zrównoważyć je na przestrzeni wszystkich fragmentów, należy własności column-fill
nadać wartość balance-all
.
Istnieje jeszcze trzecia wartość własności column-fill
– auto
. Powoduje ona, że przeglądarka nie stara się w żaden sposób równoważyć ilości treści w kolumnach, tylko wypełnia kolejne kolumny treścią sekwencyjnie. Aby dało się zaobserwować jej działanie, kontener musi mieć ograniczoną wysokość, ponieważ w przeciwnym przypadku zostanie utworzona jedna długa kolumna. Spójrz na poniższy przykład:
<style>
div {
columns: 200px;
height: 280px;
border: 1px solid black;
}
</style>
...
<div>
<p>Powieść niniejsza jest pierwszym ogniwem cyklu, który znowuż stanowi jak gdyby rodzaj kręgosłupa dla całości Komedii Ludzkiej Balzaca, łącząc jej mniej lub więcej luźne żebrowania.</p>
<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>
<p>Jak gdyby zgodnie z poglądami Balzaca na potężną rolę myśli w całokształcie zjawisk, tłem na którym się rozwija ten centralny niejako cykl powieści - Dwaj poeci, Stracone złudzenia, Cierpienia wynalazcy - jest warsztat myśli ludzkiej, ujęty, jak zawsze u Balzaca, możliwie szeroko, wraz z wszystkim, co doń przynależy: od skromnej drukarenki na prowincji, gdzie samotny myśliciel waży wynalazki mające przetworzyć technikę książki i czasopisma, od ubogiej izdebki paryskiego poddasza, gdzie również myśliciel-asceta poczyna w klasztornej ciszy i skupieniu wielkie dzieła, aż do najjaskrawszych przybytków rozpusty ducha, błyszczącego świata teatrów, dziennika i wielkiego księgarstwa paryskiego. A ten świat, niby tysiącznymi mackami, styka się z dziedziną polityki, finansów, dyplomacji, przemysłu, zbytku, prostytucji i zbrodni.</p>
</div>
Obecnie kontener wielokolumnowy nie ma zdefiniowanej własności column-fill
, a więc została jej nadana wartość domyślna balance
. Efekt tego w oknie przeglądarki jest taki:

Jak widać na powyższym zrzucie ekranu, wszystkie kolumny zawierają bardzo podobną ilość treści i są wyraźnie krótsze od wysokości kontenera wielokolumnowego. A teraz dodamy do reguły elementu div
deklarację własności column-fill
o wartości auto
:
div {
columns: 200px;
column-fill: auto;
height: 280px;
border: 1px solid black;
}
Teraz nasze kolumny wyglądają tak:

Tym razem przeglądarka po prostu umieściła treść sekwencyjnie w kolejnych kolumnach, wypełniając je od góry do dołu, w wyniku czego ostatnia kolumna różni się wysokością od poprzednich dwóch.
Kontrolowanie podziału treści na kolumny
Podział treści na kolumny stwarza pewne potencjalne problemy związane z jej rozmieszczeniem. Na przykład, jeśli umieścimy w niej nagłówki, to może się zdarzyć, że któryś z nich znajdzie się na samym końcu kolumny, co nigdy dobrze nie wygląda. Albo, jeśli użyjemy elementu figure
, aby powiązać obraz graficzny z dotyczącym go opisem, to wolelibyśmy, aby stanowiły one jedną niepodzielną całość i zawsze były umieszczane razem w jednej kolumnie.
Do rozwiązywania tego typu problemów służą trzy następujące własności CSS:
break-after
– kontroluje podział za elementembreak-before
– kontroluje podział przed elementembreak-inside
– kontroluje podział wewnątrz elementu
Kontrola podziału przed i za elementami
Do kontrolowania podziału przed i za wybranymi elementami w kolumnach służą własności break-before
i break-after
. Pierwsza kontroluje podział przed elementem HTML, a druga – za nim.
Powiedzmy na przykład, że w naszym tekście umieściliśmy nagłówek i tak się złożyło, że w określonych warunkach wypadł on akurat na końcu kolumny, co wygląda bardzo nieestetycznie. Spójrz na poniższy zrzut ekranu:

Nagłówek h3
zawierający tekst „Cykl powieści” powinien zostać przeniesiony do następnej kolumny, razem z tekstem, do którego się odnosi. Aby mieć pewność, że tak się stanie, wystarczy użyć własności break-after
o wartości avoid
, która oznacza, że przeglądarka ma unikać przełamania kolumny po tym elemencie:
h3 {
break-after: avoid;
}
Wartość avoid
jest jedną z generycznych wartości własności break-after
, tzn. może być używana w różnych rodzajach kontekstów fragmentarycznych. Jej odpowiednikiem działającym tylko w układach wielokolumnowych jest wartość avoid-column
. W opisanym przypadku każda z nich zadziała tak samo.
Ponadto własność break-after
przyjmuje jeszcze szereg innych wartości używanych w różnych kontekstach. Szczegółowe informacje znajdziesz na stronie Własność CSS break-after.
Własność break-before
działa tak samo i przyjmuje takie same wartości, jak własność break-after
, tylko kontroluje to, co się dzieje przed wybranym elementem, a nie za nim. Szczegółowe informacje na jej temat znajdziesz na stronie Własność CSS break-before.
Kontrola podziału wewnątrz elementów
Jeśli chcesz mieć pewność, że kolumna nie zostanie złamana wewnątrz wybranego elementu, to możesz użyć własności break-inside
. Typowym przykładem takiej sytuacji jest połączenie obrazu graficznego z opisem w elemencie HTML figure
, jak w poniższym przykładzie:
<figure>
<img src="balzac.jpg" alt="Portret Balzaca" width="150" height="150">
<figcaption>Portret Balzaka</figcaption>
</figure>
Jeśli wstawimy ten kod do naszego dokumentu w miejsce poprzedniego nagłówka h3
i nic więcej nie zmienimy, to otrzymamy następujący efekt:

Opis ilustracji powinien znajdować się bezpośrednio pod nią, a tutaj został umieszczony w następnej kolumnie. Aby temu zapobiec, można użyć własności break-inside
w następujący sposób:
figure {
break-inside: avoid;
text-align: center;
}
Ta reguła nakazuje unikać dzielenia zawartości elementu figure
między kolumnami oraz centruje tekst dla lepszego efektu estetycznego. Teraz nasza strona wygląda tak:

Własność break-inside
, tak jak własności break-before
i break-after
, przyjmuje jeszcze wiele innych wartości, których szczegółowy opis znajduje się na stronie Własność CSS break-inside.
Kontrola liczby wierszy
Inną ważną z punktu widzenia estetyki tekstu kwestią jest liczba samotnych wierszy na końcu i początku kolumny. Pisząc słowo „samotnych” mam na myśli takich, które występują w pojedynczym bloku, np. akapicie.
Przykładowo na poniższym zrzucie ekranu na końcu pierwszej kolumny znajduje się jeden wiersz tekstu z drugiego akapitu.

Taki pojedynczy wiersz akapitu pozostawiony na końcu kolumny nie wygląda atrakcyjnie i stanowi błąd składu tekstu.
Aby uniknąć tego typu błędów, można użyć własności orphans
i widows
. Pierwsza z nich określa minimalną liczbę samotnych wierszy na końcu kolumny, a druga – na początku.
Każda z nich jako wartość przyjmuje liczbę całkowitą bez jednostki i ma wartość domyślną 2
. Nietrudno więc się domyślić, że aby uzyskać efekt przedstawiony w powyższym przykładzie, musiałem własności orphans
nadać wartość 1
. Gdybym tego nie zrobił, drugi akapit zaczynałby się na początku drugiej kolumny i wszystko byłoby w porządku.
Krótko mówiąc, jeśli limit minimum dwóch „samotnych” wierszy na końcu i na początku kolumny jest dla Ciebie odpowiedni, to możesz zapomnieć o własnościach orphans
i widows
. Jeśli jednak z jakiegoś powodu chcesz go zmniejszyć albo zwiększyć, to nadaj tym własnościom odpowiednią wartość i pamiętaj, że definiuje się je dla kontenera wielokolumnowego, np.:
div {
columns: 16em;
orphans: 1;
}
Kontrola dekoracji treści w kolumnach
Na koniec pokażę Ci jeszcze jedną ciekawą własność, która tak jak kilka poprzednich, pochodzi z modułu CSS Fragmentation, a więc odnosi się do wszystkich rodzajów treści fragmentarycznej, w tym do kolumn w układzie wielokolumnowym.
Ta własność to box-decoration-break
. Za jej pomocą można zdecydować, jak mają być traktowane elementy ozdobne (obramowanie, marginesy, dopełnienie, tło itd.) pól elementów tworzonych przez treść podzieloną na fragmenty (kolumny) na granicach tych fragmentów.
Spójrz na poniższe przykładowe reguły CSS, które odnoszą się do kodu HTML z poprzednich przykładów:
div {
columns: 16em;
}
p {
border: 3px dashed red;
padding: 20px;
}
Obecnie efekt zastosowania tych reguł będzie taki:

Jak widać, pola elementów akapitu, są „rozrywane” na granicach kolumn, jeśli obejmują więcej niż jedną kolumnę, i w tych miejscach nie ma żadnych „ozdób”. Za pomocą własności box-decoration-break
można to zmienić tak, aby każdy fragment w obrębie kolumny miał własny pełny zestaw wszystkich dekoracji. W tym celu należy tej własności nadać wartość clone
, jak w poniższym przykładzie:
div {
columns: 16em;
}
p {
border: 3px dashed red;
padding: 20px;
box-decoration-break: clone;
}
Efekt wprowadzenia tej zmiany jest następujący:

Jak widać, teraz fragmenty akapitów we wszystkich kolumnach mają pełny niezależny zestaw wszystkich dekoracji.