23. Układ wielokolumnowy CSS

> Dodaj do ulubionych

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:

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ść:

Od tłumacza

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.

Od tłumacza

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;
}
lub

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:

Odstęp między kolumnami zwiększony do 5em

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.

Układ wielokolumnowy CSS - linie rozdzielające kolumny

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.

Układ wielokolumnowy CSS - zbyt grube linie rozdzielające nachodzące na treść kolumn

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:

Układ wielokolumnowy CSS - rozpięcie elementu h2 na wszystkie kolumny

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:

Efekt dodania rozpiętego na wszystkie kolumny cytatu blokowego

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-fillauto. 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:

Efekt zrównoważenia kolumn wartością balance

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:

Efekt równoważenia kolumn wartością auto

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:

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:

Nieestetyczny nagłówek na końcu kolumny

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:

Układ wielokolumnowy CSS - ilustracja oddzielona od podpisu

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:

Układ wielokolumnowy CSS - ilustracja razem z podpisem

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.

Jeden wiersz na końcu kolumny w układzie wielokolumnowym CSS

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:

Efekt dodania dopełnienia i obramowania do akapitów w układzie kolumnowym CSS

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:

Efekt zastosowania własności box-decoration-break

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

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.

Autor: Łukasz Piwko