O ile o tzw. stronach responsywnych słyszał każdy lub prawie każdy entuzjasta stron internetowych o tyle o siatkach CSS już nie. Osobiście wynalezienie siatek CSS uważam za większe odkrycie ponieważ znacznie przyspieszają a nawet całkowicie zmieniają tworzenie layoutów stron WWW.
Jeżeli kiedykolwiek próbowaliście stworzyć własną stronę internetową od zera (i ambitnie np. w notatniku) to sami wiecie jaki na początku jest problem z rozmieszczeniem poszczególnych elementów. Z pomocą przychodzi nam system siatek CSS.
Cóż to takiego?
Siatka CSS dzieli pole strony WWW niewidocznymi kolumnami i wierszami, w których możemy umieszczać kolejne teksty, grafiki i inne obiekty. Mogąc scalać kolejne komórki, dzielić je a także zmieniać ich wielkość mamy możliwość dowolnego rozmieszczania elementów na stronie internetowej za pomocą prostej metody, która dodatkowo nie wymaga wielu linijek kodu. Ciekawostką jest fakt, że podobną koncepcję wykorzystuje się w drukarstwie do rozmieszczania kolejnych elementów w publikacjach niezależnie od ich rodzaju i treści.
Korzyści
Nic więc dziwnego, że stosowanie tak zwanego systemu siatek CSS w wielu przypadkach przyspiesza organizowanie elementów w dokumencie HTML. Szablonowi opartemu o siatkę CSS łatwo jest nadać możliwość skalowania, gdyż wystarczy nadać elastyczność samej siatce wówczas wszystkie elementy potomne będą zachowywały się jak sama siatka. Dodatkowym atutem siatek CSS jest możliwość całkowitego zastąpienia tabel, które powinny być używane tylko do reprezentacji danych tabelarycznych. Dzięki temu strona zawiera mniej kodu, nie zostaje zaburzona hierarchia danych a kolejność elementów na stronie zgadza się z porządkiem jaki można zauważyć w kodzie strony co ułatwia rozbudowę i edycję złożonych serwisów WWW.
Trochę praktyki
Stwórzmy własny system siatek bez zbędnego filozofowania. Stwórzmy klasy dla diva będącego tak zwanym kontenerem siatki, potem klasę dla kolejnych wierszy i w końcu odpowiednie kolumny. Całość powinna wyglądać mniej więcej tak:
.container {
width: 100%;
max-width: 1170px;
margin: 0 auto;
padding: 0 0 0 1%;
}
.row {
clear: both;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
float: left;
margin: 0 3% 0 0;
}
Teraz określamy szerokości poszczególnych kolumn:
@media screen and (min-width:768px)
{
.col-1 {width: 5.5%;}
.col-2 {width: 14%;}
.col-3 {width: 22.5%;}
.col-4 {width: 31%;}
.col-5 {width: 39.5%;}
.col-6 {width: 48%;}
.col-7 {width: 56.5%;}
.col-8 {width: 65%;}
.col-9 {width: 73.5%;}
.col-10 {width: 82%;}
.col-11 {width: 90.5%;}
.col-12 {width: 99%;}
}
Dlaczego wielkości kolumn nie stanowią 100% lub połowy kontenera? Odpowiedź jest prosta: marginesy. Nikt nie zabroni stosować rozmiarów w pikselach ale sami pewnie domyślacie się jaka płynie z tego dogodność (odpowiedź w zakończeniu artykułu). No i przyda się jeszcze mały trik który będzie czyścił opływanie kolejnych wierszy:
.row:before, .row:after {content: „”;display: table; clear: both;}
Jak wykorzystujemy siatkę? Załóżmy że chcemy stworzyć taki oto layout:
Nic prostszego, jedziemy:
<div class="container"> <div class="row"> <div class="col-12"> Cała szerokość </div> </div> <div class="row"> <div class="col-6"> Połówka </div> <div class="col-6"> Druga połówka </div> </div> <div class="row"> <div class="col-4"> Jedna trzecia </div> <div class="col-4"> Jedna trzecia </div> <div class="col-4"> Jedna trzecia </div> </div> </div>
Jak zauważyliście, kolumny to wielokrotności jednej dwunastej. Stosując taką zasadę łatwiej można zapanować nad wypełnianiem każdego z rowków. Bo łączymy wówczas col-6 z dwoma kolumnami col-3 lub trzy razy wstawiamy col-4.
Frameworki
Zwykle wykorzystuje się gotowe rozwiązania tzw. Frameworki CSS z wbudowanym i rzecz jasna bardziej dopracowanym grid systemem przykładem jest Twitter Bootstrap lub same systemy siatek takie jak:
- 960 grid system
- Skeleton
- Simple Grid
- Responsive Grid System
Jak działa statyczna siatka można przetestować na stronie: www.profiler.pl. Zwróćcie uwagę na oszczędność kodu w źródle strony. A tak działa siatka responsywna: share.xgate.pl.
Flexbox
Choć zaprezentowana w tym wpisie technika tworzenia siatki jest wciąż stosowana i aktualna, wraz z popularyzacją flexboxa tworzenie siatek można wykonać w inny sposób.
Za pomocą instrukcji display:flex mamy do dyspozycji wachlarz rozwiązań, które znacznie ułatwiają tworzenie takich układów a nawet umożliwiają wykonanie siatki, którą przy pomocy poprzedniej techniki byłyby trudne do osiągnięcia. Czytaj więcej o technice flexbox w obszernym przewodniku: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Podsumowanie
Tworząc layout w oparciu o naszą siatkę CSS bardzo łatwo jest nadać jej płynność bo przecież posługiwaliśmy się procentami, dzięki czemu wielkość poszczególnych komórek siatki jest proporcjonalna do ich rodzica. Wykorzystując do tego zapytania medialne stworzymy dopasowujący się do ekranu szablon niemal w mgnieniu oka.
