Podział tekstu na równej szerokości kolumny – Multiple Columns [CSS]

Tym razem pokażę wam w jaki sposób dokonać podziału tekstu na kilka równej szerokości kolumn (bez użycia tradycyjnego grida) jak z dowolnej gazety.

Właściwości CSS, które opisze poniżej powoduje w miarę równomierny podział długości tekstu dostosowany do aktualnej szerokości naszej strony. Oznacza to, że nie musimy tworzyć kilku elementów blokowych i martwić się później jak to będzie wyglądało na innym monitorze. „Odpada” nam więc tworzenie dodatkowej siatki dla tekstu. Podział tekstu będzie dokonywał się dynamicznie.

Jak już zdążyłam napisać uzyskane kolumny będą mniej więcej takiej samej długości. Metoda ta działa jednak tylko na sam tekst, jeżeli więc interesuje was jak ogólnie tworzyć kolumny na stronie zapraszam do przeczytania innego mojego wpisu.

Wartości stosowane przy Multiple Columns

Oczywiście do stworzenia tych kolumn będziemy potrzebowali więcej jak jednej właściwości CSS. Każda z nich będzie odpowiadać za inny element/ aspekt dotyczący ułożenia kolumn na stronie. Najprościej będzie to chyba porównać do tabeli. Gdzie musimy podjąć decyzję ile chcemy mieć kolumn, jakie przerwy mają być między nimi.

Na początek warto się zapozna z kilkoma właściwościami CSS3:

• column-count – określa ilość kolumn na jakie podzielimy nasz tekst
• column-gap – dodaje odstępy między kolumnami
• column-rule-style – definiuje rodzaj stylu obramowania (czy będzie to np. zwykła linia, czy może kropkowana)
• column-rule-width – szerokość obramowania
• column-rule-color – definiuje kolor obramowania kolumn
• column-rule – połączenie innych właściwości
• column-span – określa, ile kolumn ma obejmować element.
• column-width – określa proponowaną, optymalną szerokość kolumn

Jak podzielić tekst na 3 rzędy/ kolumny?

Na sam początek oczywiście musimy mieć tekst o odpowiedniej długości. Kiedy już będziemy go mieli możemy przystąpić do podziału (oczywiście na początek może to być przykładowy tekst tylko do sprawdzenia czy nasz kod działa). W poniższym przykładzie tekst tak naprawdę jest umieszczony w jednym kontenerze to CSS rozdziela go na 3 części z pomocą

column-count: 3;

Kod powyższego przykładu możecie podejrzeć w odpowiednich zakładkach codepen. Jak widać dokonałam podziału na 3 równej szerokości kolumny. Teraz z pewnością zastanawiacie się w jaki sposób można wpływać na ilość kolumn.?

Ilość uzyskanych rzędów określana jest za pomocą parametru column-count  np. podział na 2:

Metoda ta sprawdza się również na stronach RWD. Kolumny będą się dostosowywać do szerokości ekranu. W naszym przypadku szerokość minimalna to 200px. W przypadku gdy szerokość ekranu będzie mniejsza niż 200px z 2 kolumn zrobi się jedna.

Zastanawiacie się pewnie co z RWD dla powyższego kodu? O tuż w przypadku powyższego przykładu kolumny na początek będą się zwężały po czym ich ilość zacznie się zmniejszać aż zostanie tylko 1.

Dodawanie widocznego podziału między kolumnami

W celu dodania linii rozdzielających kolumny wystarczy do kodu CSS dodać:

-webkit-column-rule-style: dashed; /* Chrome, Safari, Opera */-moz-column-rule-style:dashed; /* Firefox */column-rule-style: dashed;

Oczywiście nie jesteśmy ograniczeni do kropkowanych linii podziału – praktycznie mamy takie same opcje jak przy innych obramowaniach.

Rozdzielanie kolumn – column-rule-color

Jak penie zauważyliście kolor rozdzielających kolumny linii jest czerwony. Efekt ten uzyskałam dodając właściwość:

-webkit-column-rule-color: red;
-moz-column-rule-color: red;
column-rule-color: red;

Właściwość column-span

Przykładowe zastosowanie column-span. Właściwość ta jest bardzo ważna!

column-span: all;

W powyższym przypadku dzięki właściwości column-span mamy wyraźnie określone granice. Kiedy kończy się jedna grupa kolumn a kiedy zaczyna druga. Bez niej elementy zaczęły by się układać jeden obok drugiego w efekcie straciły by na czytelności.

Działanie column-gap – dodanie odstępu między kolumnami

Zadaniem column-gap jest określanie przerwy pomiędzy kolumnami.

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */-moz-column-gap: 40px; /* Firefox */column-gap: 40px;

Interpretacja przez przeglądarki

Uwaga: column-span – nie jest obsługiwana przez Firefox

Źródło:
https://www.w3schools.com/css/css3_multiple_columns.asp

Dodatkowe tagi:
Układ wielokolumnowy z pomocą jedynie CSS column-count
Multiple Columns (Multi-Column), płynne dzielenie tekstu na kilka kolumn z pomocą CSS
kolumny o określonej szerokości bez pomocy div
automatyczny, samodzielny podział na kolumny
bezpośredniej interwencji