Jak stworzyć poprawny fluid grid?

Zanim zaczniemy tworzyć fluid grid musimy sobie odpowiedzieć na pytanie czym on tak naprawdę jest. Jest to “system” kolumn, którego możemy użyć przy programowaniu strony z uwzględnieniem RWD. Dzięki fluid grid możemy ustalić szerokość procentową danych części layoutu, a sam grid charakteryzuje się płynną zmianą szerokości kolumn (dzięki procentowo zapisanym szerokościom).

Standardową, maksymalną ilością kolumn, którą możesz utworzyć na stronie jest 12 kolumn. Dzięki takiej liczbie możesz utworzyć najwięcej kombinacji jeśli chodzi o różną ilość kolumn o takiej samej szerokości. Na takiej zasadzie działają również frameworki CSS m. in.Bootstrap. Oczywiście możesz również ustawić sobie dowolną ilość kolumn o różnych szerokościach.

Jeśli piszesz swój własny grid, możesz także bez problemu zmienić maksymalną ilość kolumn jaką potrzebujesz do napisania swojej strony, pamiętaj jednak, że np. używając 15 kolumn jako maksymalnej liczby ograniczasz się przy ustawianiu równych kolumn. W takim przypadku miałbyś tylko dwie opcje: 3 kolumny lub 5 kolumn.

Tworzymy własny grid

A więc jak utworzyć swój własny grid? Zaczynamy od ustawienia właściwościbox-sizing:

Dzięki temu jak już pewnie wiesz, ustawiamybox-sizingnaborder-box, a prościej m. in.paddingnie powiększy nam rozmiaru danego elementu. Przyda nam się to przy tzw. gutterze, czyli przerwie pomiędzy zawartością sąsiadujących kolumn.

Możesz oczywiście ustawićbox-sizingtylko dla elementów dzieci kontenera, ale jest to częsty zabieg, potrzebny również w innych rozwiązaniach, dlatego umieściłem ten zapis dla wszystkich znaczników.

Następnie potrzebujemy elementu kontenera. Już widziałeś podobny kod takiego kontenera w lekcji o nadużyciach media query. Teraz można wykorzystać to w praktyce:

Powyższy element będzie występował zawsze w tym miejscu w którym chcemy umieścić kolumny. Dzięki niemu otrzymamy kontener o szerokości1200pxlub95%ekranu. Możemy oczywiście ten kontener pominąć jeśli chcemy stworzyć layout z kolumnami na całej szerokości strony.

Przed przejściem do kodu samych kolumn musimy najpierw przeliczyć szerokości dla każdej możliwej opcji kolumny. Ustalmy, że nasz fluid grid będzie posiadał 12 standardowych kolumn. Musimy zatem wykonać kilka obliczeń:

Obliczyliśmy powyżej szerokości procentowe, dla każdego typu kolumny dostępnego w naszym fluid grid. Wykorzystamy te wartości już za chwilę do ustalenia szerokości naszych kolumn.

Nadmienię jeszcze jedną rzecz. W całej lekcji używam słowa kolumna, ale oczywiście layout nie ma tylko przeznaczenia czysto kolumnowego, tabelarycznego itp. Kolumny to tylko niewidoczna siatka, w której możemy ułożyć elementy. Jest to tylko uproszczenie dla programisty i znaczne ułatwienie w dostosowaniu strony do urządzeń mobilnych w poprawny sposób. Nie bój się więc w żadnym przypadku słowa kolumna, bo nie oznacza ono stricte kolumn, a jedynie prostą siatkę do układania elementów.

Kolumny i wiersze

Zajmijmy się więc samymi elementami gridu. Musimy najpierw wprowadzić pojęcie wiersza (row) i kolumny (col). Będą to zwykłe elementydiv, które funkcjonalnością będą odwzorowywać działanie elementówtritdw tabeli. Nie będą jednak posiadać stylówdisplay: table-rowitd. Struktura HTML gridu będzie wyglądać np. w taki sposób:

Wiersz będzie odpowiadać za daną część strony w której kolumny będą znajdować się obok siebie (o ile będzie taka możliwość). Co natomiast z kolumnami? W powyższym kodzie użyłem dokładnie takiego samego zapisu jaki stosuje się np. w frameworku Bootstrap. Nazwa klasy kolumny składa się z trzech członów:

1. col- : mówi o tym, że dany element będzie kolumną;
2. md- : mówi o tym, że dany rozmiar zapisany na ostatnim miejscu będzie miał zastosowanie szerokości “medium” (wyjaśnienie poniżej);
3. 4 : mówi o tym, że dana kolumna będzie miała 4/12 szerokości całego wiersza.

Może wydawać Ci się to teraz bardzo skomplikowane, ale takie nie jest. Jeden element może posiadać wiele takich klas np.:

Co oznacza powyższy zapis? Omówmy najpierw drugi człon nazwy klasy:

1. xs
   • extra small (bardzo małe urządzenia, np. do 767px );
2. sm
   • small (małe urządzenia, np. od 768px do 991px );
3. md
   • medium (średnie urządzenia, np. od 992px do 1199px );
4. lg
   • urządzenia duże (większe niż 1200px ).

Łącząc wszystkie elementy dochodzimy do wniosku, że powyższy kod oznacza, że element będzie miał:

1. 100% szerokości - dla bardzo małych urządzeń;
2. 50% szerokości - dla małych urządzeń;
3. 25%szerokości - dla pozostałych urządzeń, czyli od 992px wzwyż.

Całość oczywiście opiera się na dobrze napisanym CSSie i media query. Do kolumny należy także użyć dla wszystkich kolumn paddingu z lewej i prawej strony. W jakim celu? Bez tego paddingu zawartość kolumn stykała by się ze sobą i nie wyglądałoby to estetycznie. Dodatkowy padding oddziela poszczególne kolumny od siebie. Jest to tzw.gutter, o którym wspomniałem już w tej lekcji.

Jak widzisz nie jest to tak skomplikowane jak się wydaje. Kiedy możesz potrzebować stworzyć własny fluid grid? Przede wszystkim wtedy, gdy będziesz potrzebował niestandardowej liczby kolumn, dla swojego projektu. Jest to główna przeszkoda w korzystaniu z gotowych rozwiązań. W dodatku w rozdziale o Bootstrapie znajdziesz jednak coś, co może ułatwić Ci takie zadanie.

Zadanie 1

Twoim zadaniem jest ostylowanie elementów.col-md-8i.col-md-4zgodnie z zasadmi, które poznałeś w lekcji.

Dla uproszczenia, w tym zadaniu pomijamy media query. Właściwości.col-md-8i.col-md-4powinny być zastosowane niezależnie od aktualnej szerokości ekranu.

Podsumowanie

W tej lekcji nauczyłeś się co to jest fluid grid, jak obliczać wartości poszczególnych kolumn oraz dlaczego warto stosować gutter. Dowiedziałeś się także jak zazwyczaj zbudowane są klasy poszczególnych elementów i poznałeś podział na różne kategorie urządzeń. Zapraszam Cię na następną lekcję w której poznasz 3 sposoby na zmianę kolejności elementów ze względu na szerokość ekranu urządzenia.