Układ wielokolumnowy

W tym rozdziale dowiesz się...

Wstęp

W zasadzie wszystkie popularne papierowe czasopisma przyzwyczaiły czytelników do układu wielokolumnowego. Tekst artykułów jest w nich ułożony w wielu wąskich, sąsiadujących ze sobą kolumnach. Dzięki temu zwykle staje się on łatwiejszy w czytaniu, gdyż przenosząc wzrok z końca jednej linijki na początek kolejnej, oko nie musi pokonywać długiej drogi. Wiele nowoczesnych serwisów internetowych również składa się z kilku kolumn, ale najczęściej inaczej niż w gazecie właściwa treść artykułu znajduje się w pojedynczej kolumnie, a pozostałe kolumny są przeznaczone na menu lub inne elementy kontekstowe (popularne odnośniki, inne podobne artykuły czy reklamę). Jest to zatem sytuacja zupełnie inna, choć w wielu przypadkach całkowicie pożądana.

Gazetowy układ wielokolumnowy teoretycznie można próbować symulować za pomocą tabel. Ma to jednak spore wady, które praktycznie dyskwalifikują takie rozwiązanie:

  • Inaczej niż w prawdziwym, gazetowym układzie strony, tekst z końca jednej kolumny tabeli nie przechodzi automatycznie na początek kolejnej, umieszczonej po jej prawej stronie. Po zmianie wielkości lub rodzaju czcionki, tekst w kolumnie tabeli ułoży się w zupełnie inny sposób - najprawdopodobniej wysokość przestrzeni zajmowanej przez tekst w kolumnach nie będzie identyczna.
  • Na niewielkich ekranach - np. telefonów komórkowych - ustalona zbyt duża liczba kolumn w tabeli może sprawić, że będą one zdecydowanie zbyt wąskie. W arkuszu CSS dla urządzeń mobilnych nie można zmniejszyć liczby kolumn w wierszu tabeli.
  • Na wydruku kolumna tabeli może zostać podzielona między dwie strony.

Dopiero prawdziwy układ wielokolumnowy (ang. multi-column layout) - wprowadzony w CSS 3 - pozwala pozbyć się wszystkich tych wad. W uproszczeniu można przyjąć, że treść na każdej stronie WWW jest rozplanowana w układzie wielokolumnowym, ale tylko z jedną kolumną. Jednak w odróżnieniu od układu standardowego, zawartość szersza od kolumny (np. długi, niełamliwy wyraz) zostanie przycięta.

Nie oznacza to raczej jednak, że od dzisiaj wszystkie serwisy internetowe powinny zacząć wszędzie stosować nowy sposób rozplanowanie tekstu. Zwróćmy uwagę, że w papierowych gazetach zwykle nie występują wspomniane już wcześniej elementy kontekstowe, menu, obiekty multimedialne, a reklamy najczęściej są umieszczane na osobnych stronach. Układ wielokolumnowy może jednak być przydatny w pewnych elementach serwisów WWW - np. sam wstęp do obszerniejszego artykułu, który nie jest długi i nie zawiera bardziej skomplikowanego formatowania tekstu ani multimediów. Nadaje się oczywiście również bardzo dobrze na internetowe wydania papierowych czasopism lub podobnych magazynów, ukazujących się w formie elektronicznej.

Szerokość kolumny

(CSS 3 - interpretuje Internet Explorer 10, Opera 11-12 i 37, Chrome 50)

selektor { column-width: szerokość }
Selektorem może być dowolny element blokowy z wyjątkiem tabel [zobacz: Wstawianie stylów].

Szerokość jest wyrażona w jednostkach długości i musi być większa od zera. Aby usunąć kolumny lub pozwolić przeglądarce wyznaczyć ich szerokość w inny sposób, należy podać wartość auto.

Ustalając szerokość kolumn pozwalamy przeglądarce automatycznie wyświetlić tyle kolumn, ile będzie konieczne, aby pomieścić całą zawartość elementu. Liczba kolumn nie będzie jednak większa niż zdoła się zmieścić w założonej szerokości elementu albo strony.

Należy pamiętać, że faktyczna wyświetlona szerokość kolumny może być większa niż podana, ponieważ przeglądarka stara się wypełnić treścią całą szerokość wielokolumnowego bloku. Na przykład podając "column-width: 45px; width: 100px", aby kolumny zajęły całą poziomą przestrzeń elementu, zostaną dopasowane do szerokości 50px. W szczególnym przypadku kolumna może być również węższa niż podano - jeżeli cały blok jest węższy, aby mógł pomieścić przynajmniej jedną kolumnę.

W obecnej wersji specyfikacja CSS nie pozwala ustalać różnej szerokości kolumn tego samego elementu.

Przykład:

column-width: 100px;
To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie...

Liczba kolumn

(CSS 3 - interpretuje Internet Explorer 10, Opera 11-12 i 37, Chrome 50)

selektor { column-count: liczba }
Selektorem może być dowolny element blokowy z wyjątkiem tabel [zobacz: Wstawianie stylów].

Liczba jest wartością naturalną, większą od zera. Aby usunąć kolumny lub pozwolić przeglądarce wyznaczyć ich szerokość w inny sposób, należy podać wartość auto.

Polecenie jest przydatne, jeżeli ważniejsze jest dla nas, aby tekst zawsze znajdował się w ściśle określonej liczbie kolumn, a przeglądarka sama zajęła się automatycznym dopasowaniem ich szerokości.

Przykład:

column-count: 3;
To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie...

Atrybuty mieszane

(CSS 3 - interpretuje Internet Explorer 10, Opera 11-12 i 37, Chrome 50)

selektor { columns: wartości atrybutów }
Selektorem może być dowolny element blokowy z wyjątkiem tabel [zobacz: Wstawianie stylów].

Jako "wartości atrybutów" można podać samą wartość szerokości kolumny, tylko liczbę kolumn lub obie wartości rozdzielone spacją. Ustalenie wartości auto usuwa kolumny.

Polecenie jest przydatne, jeżeli chcemy skrócić zapis. Możemy też dzięki niemu szybko usunąć podział na kolumny, poprzez wpisanie "columns: auto".

Odstęp kolumn

(CSS 3 - interpretuje Internet Explorer 10, Opera 11-12 i 37, Chrome 50)

selektor { column-gap: szerokość }
Szerokość jest wyrażona w jednostkach długości i nie może być mniejsza od zera. Aby wymusić domyślny odstęp, należy podać wartość normal.

Sąsiadujące kolumny z tekstem nie powinny do siebie bezpośrednio przylegać, gdyż wywołałoby to zlewanie się tekstu na krawędzi kolumn. Temu nieprzyjemnemu efektowi może skutecznie zapobiegać przerwa między kolumnami. Warto mieć na uwadze, że wartość domyślna tego odstępu (normal) zależy od konkretnej przeglądarki i wcale nie musi być równa zero.

W obecnej wersji specyfikacja CSS nie pozwala ustalać różnego odstępu kolumn tego samego elementu.

Przykład:

columns: 3; column-gap: 1em;
To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie...

Linia rozdzielająca

(CSS 3 - interpretuje Internet Explorer 10, Opera 11-12 i 37, Chrome 50)

  1. Kolor:
    selektor { column-rule-color: kolor }
    gdzie "kolor" jest definicją koloru
  2. Styl:
    selektor { column-rule-style: styl }
    gdzie "styl" określa się identycznie jak w przypadku obramowania
  3. Szerokość:
    selektor { column-rule-width: szerokość }
    gdzie "szerkość" określa się identycznie jak w przypadku obramowania
  4. Atrybuty mieszane:
    selektor { column-rule: wartości atrybutów }
    Jako "wartości atrybutów" podaje się rozdzielone spacjami wartości szerokości, stylu i koloru linii rozdzielającej.

Czasami samo oddzielenie kolumn odstępem nie jest wystarczające, aby czytelnik mógł wygodnie przeczytać cały tekst oraz już na pierwszy rzut oka widział, że treść w ogóle jest podzielona na kolumny. Wtedy możemy pomiędzy sąsiednimi kolumnami wstawić dodatkowo pionową linię rozdzielającą. Jest ona wyświetlana zawsze na środku przestrzeni między kolumnami. Sama linia rozdzielająca nie zabiera miejsca z szerokość elementu wielokolumnowego. Jeśli jej grubość będzie większa niż szerokość odstępu kolumn, wyświetli się pod tekstem znajdującym się w kolumnach.

W obecnej wersji specyfikacja CSS nie pozwala ustalać różnej linii rozdzielającej kolumny tego samego elementu.

Przykład:

columns: 3; column-rule: 1px solid black;
To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie...

Przełamanie kolumny

(CSS 3 - interpretuje Internet Explorer 10, Opera 11-12 i 37, Chrome 50)

  1. Przełamanie kolumny przed elementem:
    selektor { break-before: column }
  2. Przełamanie kolumny po elemencie:
    selektor { break-after: column }
  3. Blokada przełamania kolumny przed elementem:
    selektor { break-before: avoid-column }
  4. Blokada przełamania kolumny po elemencie:
    selektor { break-after: avoid-column }
  5. Blokada przełamania kolumny wewnątrz elemenu:
    selektor { break-inside: avoid-column }
We wszystkich przypadkach selektorem musi być element blokowy (wstawiony wewnątrz kolumny).

Tekst nie zawsze musi przełamywać się między kolumnami tak, jak byśmy sobie tego życzyli. Możemy np. nie chcieć, aby tytuł znalazł się na końcu kolumny. W takim przypadku estetyczniej będzie wyglądało, jeśli kolumna przełamie się wcześniej, aby tytuł znalazł się na początku następnej. Taki efekt zapewnimy poprzez nadanie stylu:

h1 { break-after: avoid-column }

Z drugiej strony możemy chcieć wymusić przełamanie kolumny po zakończeniu w tekście sekcji, czyli np. zaraz po poziomej linii:

hr { break-after: column }

Wreszcie w pewnych przypadkach może nam zależeć, aby wybrany fragment tekstu - np. akapit - nigdy nie został przełamany do następnej kolumny:

p { break-inside: avoid-column }

Przykład:

To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. break-after: column;
Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie...

Łączenie kolumn

(CSS 3 - interpretuje Internet Explorer 10, Opera 11-12 i 37, Chrome 50)

selektor { column-span: all }
Selektorem może być dowolny element blokowy, bez ustawionego oblewania ani pozycjonowania absolutnego.

Aby odwołać łączenie kolumn, należy podać wartość none.

Zdarzają się sytuacje, kiedy chcemy wyskoczyć z ustalonego podziału tekstu na kolumny. Może to mieć miejsce np. w przypadku tytułów, które rozpoczynają kolejny artykuł albo nową sekcję w artykule. Mamy możliwość rozciągnięcia tytułu na szerokość wszystkich kolumn. Wcześniejsze kolumny tekstu będą się kończyć ponad tytułem, a następne zaczynać poniżej niego. Zatem nie mamy tutaj do czynienia z sytuacją spotykaną czasem w gazetach, kiedy tekst w kolumnach czytamy z góry do dołu przeskakując przez tytuł lub zdjęcie umieszczone w środku.

W obecnej wersji specyfikacja CSS nie pozwala określać liczby łączonych kolumn.

Przykład:

To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie...

column-span: all; To jest element rozciągający się ponad wszystkimi kolumnami tekstu.

To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie...

Wypełnienie kolumn

(CSS 3 - interpretuje Internet Explorer 10, Opera 11-12 i 37, Chrome 50)

selektor { column-fill: wypełnienie }
Jako "wypełnienie" należy podać:
balance
Kolumny wypełnią całą możliwą szerokość elementu (domyślnie)
auto
Kolumny wypełnią całą możliwą wysokość elementu (ma sens tylko, jeśli jednocześnie określimy wysokość elementu, który zawiera kolumny)

Przeglądarka stara się zawsze zrównoważyć kolumny tekstu w taki sposób, aby możliwie wszystkie (oprócz ostatniej) miały taką samą wysokość i nie było żadnej wolnej przestrzeni z prawej strony elementu. Oznacza to, że nawet jeśli ustalimy wysokość elementu, kolumny mogą być od niej niższe, jeśli treści nie będzie wystarczająco dużo, aby wypełnić cały element nie tylko na szerokość, ale i na wysokość.

W pewnych sytuacjach może nam jednak zależeć, aby wysokość kolumn miała dokładnie tyle, ile określimy, nawet jeśli z prawej strony niektóre kolumny miałyby być zupełnie puste. Służy to tego deklaracja: "column-fill: auto".

Przykład:

columns: 3; column-fill: balance; height: 500px;
To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie...

columns: 3; column-fill: auto; height: 500px;
To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie... To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek sąsiedniej, leżącej po jej prawej stronie...