Jak korzystać z kolumn CSS w wielu układach witryn

Przez wiele lat przepływy CSS były drobnym, ale niezbędnym elementem w tworzeniu layoutów stron. Jeśli twój projekt wymagał wielu kolumn, przełączyłeś się na pływające. Problem z tą metodą polega na tym, że pomimo niewiarygodnej pomysłowości, którą twórcy stron / deweloperzy wykazali w tworzeniu złożonych układów stron, pływaki CSS nigdy nie miały być używane w ten sposób.

Podczas gdy pływaki i pozycjonowanie CSS z pewnością będą miały miejsce w projektowaniu stron internetowych przez wiele lat, nowsze techniki układania, w tym CSS Grid i Flexbox, dają projektantom stron internetowych nowe sposoby tworzenia układów stron. Kolejną nową techniką układania, która pokazuje wiele możliwości, jest wiele kolumn CSS.

Kolumny CSS istnieją już od kilku lat, ale brak wsparcia w starszych przeglądarkach (głównie starszych wersjach Internet Explorera) uniemożliwiło wielu profesjonalistom w korzystaniu z tych stylów w ich pracy produkcyjnej.

Po zakończeniu wsparcia dla starszych wersji IE, niektórzy projektanci stron internetowych eksperymentują teraz z nowymi opcjami układu CSS, w tym z kolumnami CSS, i stwierdzili, że mają o wiele więcej kontroli przy tych nowych podejściach niż w przypadku ruchomych.

Podstawy kolumn CSS

Jak sama nazwa wskazuje, wiele kolumn CSS (zwanych również układem wielokolumnowym CSS3) pozwala dzielić zawartość na określoną liczbę kolumn. Najprostszymi właściwościami CSS, których możesz użyć, są:

liczba kolumn
luka między kolumnami

W przypadku liczby kolumn podajesz żądaną liczbę kolumn. Luka kolumnowa byłaby rynnami lub odstępami między tymi kolumnami. Przeglądarka przyjmie te wartości i podzieli zawartość w równomierny sposób na określoną liczbę kolumn.

Typowym przykładem wielu kolumn CSS w praktyce byłoby podzielenie bloku tekstu na wiele kolumn, podobnie jak w artykule w gazecie. Załóżmy, że masz następujące znaczniki HTML (pamiętaj, że na przykład, umieszczam tylko początek jednego akapitu, podczas gdy w praktyce prawdopodobnie będzie wiele akapitów treści w tym znaczniku):


Nagłówek twojego artykułu
Wyobraź sobie tutaj mnóstwo akapitów tekstu …

Jeśli następnie napisałeś te style CSS:

.content {-moz-column-count: 3; -webkit-column-count: 3; liczba kolumn: 3; -moz-kolumna-gap: 30px; -webkit-kolumna-gap: 30px; luka kolumnowa: 30 pikseli; }

Ta reguła CSS podzieliłaby podział "treści" na 3 równe kolumny z odstępem 30 pikseli między nimi. Jeśli chcesz mieć dwie kolumny zamiast 3, po prostu zmieniłbyś tę wartość, a przeglądarka obliczy nowe szerokości tych kolumn, aby rozdzielić zawartość równomiernie. Zauważ, że najpierw używamy właściwości prefiksowanych przez dostawcę, a następnie deklaracje nieprefiksowane.

Tak proste, jak jego użycie w ten sposób jest wątpliwe w przypadku korzystania z witryny. Tak, możesz podzielić kilka treści na wiele kolumn, ale może to nie być najlepszy sposób czytania w Internecie, zwłaszcza jeśli wysokość tych kolumn spadnie poniżej "zagięcia" ekranu.

Czytelnicy będą musieli przewijać w górę iw dół, aby przeczytać pełną treść. Mimo to główna kolumna CSS jest tak łatwa, jak tu widzisz, i można jej użyć do zrobienia o wiele więcej niż tylko podzielenie zawartości niektórych akapitów - może ona rzeczywiście być użyta do układu.

Układ z kolumnami CSS

Załóżmy, że masz stronę internetową z obszarem treści z 3 kolumnami zawartości. Jest to bardzo typowy układ strony, a aby osiągnąć te 3 kolumny, normalnie unoszą się podziały, które są w. Z CSS wiele kolumn, to jest o wiele łatwiejsze.

Oto przykładowy kod HTML:

 
Z naszego bloga
Treść trafiłaby tutaj …
  Używanie szerokości kolumnyIstnieje inna właściwość oprócz "kolumny-licznika", której możesz użyć, i w zależności od potrzeb Twojego układu może to być lepszy wybór dla Twojej witryny. To jest "szerokość kolumny". Używając tego samego znacznika HTML, jak pokazano wcześniej, możemy to zrobić za pomocą naszego CSS:
 .content {-moz-column-width: 500px; -webkit-column-width: 500px; szerokość kolumny: 500px; -moz-kolumna-gap: 30px; -webkit-kolumna-gap: 30px; luka kolumnowa: 30 pikseli; } .content div {display: inline-block; }
Działa to w ten sposób, że przeglądarka używa tej "szerokości kolumny" jako maksymalnej wartości tej kolumny. Jeśli więc okno przeglądarki ma mniej niż 500 pikseli szerokości, te trzy podziały pojawią się w jednej kolumnie, jednej z wierzchołków drugiej. Jest to typowy układ stosowany w przypadku układów mobilnych / małych ekranów.
 






Wraz ze wzrostem szerokości przeglądarki, która będzie wystarczająco duża, aby zmieściła się w 2 kolumnach wraz z określonymi przerwami w kolumnie, przeglądarka automatycznie przejdzie od układu jednej kolumny do dwóch kolumn. Zwiększaj szerokość ekranu, a ostatecznie otrzymasz projekt 3 kolumnowy, z każdym z naszych 3 działów wyświetlanych w ich własnej kolumnie. Ponownie, jest to świetny sposób na uzyskanie responsywnych, przyjaznych dla wielu urządzeń układów, a do zmiany stylów układu nie trzeba nawet używać zapytań o media!
 Inne właściwości kolumny
Oprócz omawianych tu właściwości istnieją również właściwości "reguły kolumnowej", w tym wartości kolorów, stylów i szerokości, które umożliwiają tworzenie reguł między kolumnami. Zostaną one użyte zamiast granic, jeśli chcesz mieć kilka linii oddzielających kolumny.
 Czas na eksperyment
Obecnie układ wielu kolumn w CSS jest bardzo dobrze obsługiwany.Dzięki prefiksom ponad 94% internautów byłoby w stanie zobaczyć te style, a ta nieobsługiwana grupa byłaby po prostu znacznie starszą wersją przeglądarki Internet Explorer, której i tak nie będziesz już obsługiwać.
Przy obecnym poziomie wsparcia nie ma powodu, aby nie eksperymentować z kolumnami CSS i nie wdrażać tych stylów w witrynach gotowych do produkcji. Możesz rozpocząć eksperymenty za pomocą HTML i CSS przedstawionych w tym artykule i grać z różnymi wartościami, aby zobaczyć, co będzie najlepiej pasowało do potrzeb Twojej witryny.