Dzielenie tekstu na kolumny w CSS 3

Nie od dziś wiadomo, że ludzkie oko bardziej przyzwyczajone jest do czytania tekstu podzielonego na kilka kolumn o małej szerokości. Takie rozwiązanie w kontekście projektowania stron internetowych ma oczywiście swoje plusy i minusy, ale czasami się sprawdza (choć niekoniecznie zawsze). Przyjrzyjmy się wiec jak to szybko i sprawnie zrobić…

Do podzielenia tekstu na kolumny wykorzystamy oczywiście polecenia dostępne w CSS 3 takie jak: column-count, column-rule, column-rule-style, column-gap itd..

Jak nietrudno się domyślić liczbę kolumn ustalamy za pomocą polecenia column-count (przykład dla 3 kolumn):

column-count: 3;

Odstęp między poszczególnymi kolumnami wyznaczamy za pomocą stylu column-gap:

column-gap: 20px;

Kolumny możemy również oddzielić od siebie jakimś obramowaniem. Używamy do tego celu column-rule-style:

column-rule-style: solid;

Szerokość obramowanie ustawionego wyżej modyfikujemy poleceniem column-rule-width:

column-rule-width: 1px;

Możemy również zmienić kolor za pomocą column-rule-color:

column-rule-color: #D1D1D1;

Styl obramowania, jego szerokość oraz kolor można również ustawić poleceniem column-rule:

column-rule: 1px solid #D1D1D1;

Przykłady

column-count: 3;
column-gap: 20px;

Efekt:

column-count: 3;
column-gap: 20px;
column-rule:1px solid #D1D1D1;

Efekt:

Wsparcie w przeglądarkach

Internet Explorer 10 – pełne wsparcie.

Google Chrome 4.0 lub wyższy, Firefox 2.0 lub wyższy, Safari 3.1 lub wyższy, Opera 15.0 lub wyższa – wsparcie tylko z przedrostkami:

Column, CSS 3, CSS 3 column, Front-end, Programowanie, Tworzenie stron WWW