#34. Grid na flexie

Słowem wprowadzenia

W jednym z wcześniejszych ▶ materiałów pokazywałem jak tworzyć grid – metoda tworzenia układu strony w podziale na kolumny. Trzeba było używać znanych Ci właściwości CSS: width i float. Niestety jest obarczony błędami treści wystających poza kontener.

Poniżej zobaczysz przykładowy grid, który stworzyłem. Wspomaga on na zarządzaniu ułożeniem elementów na stronie.

 

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

determined-gauss-e9ifn

determined-gauss-e9ifn by danielminschinski

Książkowy grid składa się z następujących elementów:

  • kontenera (container) – pełni funkcję opakowania dla całej zawartości,
  • wiersza (row) – wykorzystuję się go do odseparowania zawartości kolejnych sekcji kontenera,
  • kolumn (col-X) – najczęściej dwunastu o różnej szerokości, przy czym najmniejsza kolumna ma szerokość 1/12 dostępnej przestrzeni a największa 12/12 tzn. 100% dostępnej przestrzeni w wierszu.

Analizując plik ze stylami, można stwierdzić, że przy użyciu Flexboxa, utworzenie systemu dla grid jest bardzo łatwym zadaniem. Dla każdego oznaczenia kolumny jest stała wartość procentowa – i te reguły można spokojnie kopiować do swoich zadań.

Na pierwszy ogień – kontener😉

Przeanalizujmy powyższy przykład od początku. 

Kontenerem nazywamy element pomocniczy. Odpowiedzialny jest za maksymalną dostępną szerokość lub wysokość dla wiersza w kontenerze. Naturalną pozycją jest środek. Powinien posiadać elastyczną szerokość tak by nie rozpychać ekranu przy mniejszych szerokościach.

W poniższym przykładzie pokazałem sam kontener.

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

gallant-morning-ziivz

gallant-morning-ziivz by danielminschinski

Wiersz

W kontenerze grida, wiersz pełni rolę opakowania dla kolumn (boksów) jako ich bezpośredni kontener. Głównym jego zadaniem jest utrzymanie ich w jednej linii i oddzielenie od pozostałych części głównego kontenera. W wierszu (row) wskazane jest użyć ujemnych bocznych marginesów. Głównie chodzi o to by elementy wewnątrz skrajnych kolumn miały swój początek i koniec razem z krawędzią kontenera, a jednocześnie żeby była zachowana przestrzeń między kolumnami. Rozwińmy poprzedni przykład i dodajmy element wiersza oraz treści.
PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

elated-worker-29nu8

elated-worker-29nu8 by danielminschinski

Kolumna

Kolumny zostawiamy na sam koniec, ponieważ są finalną częścią każdego gridu. Zawierają się one w wierszu (row).

System 12-kolumnowy już znasz. Element o klasie col-6 będzie miał szerokość połowy kontenera (50%), ponieważ 6/12 to dokładnie 50%. Element o klasie col-3 będzie miał szerokość 25%, ponieważ 3 to 25% z 12. Taka zasada jest dla pozostałych kolumn.

Style jak ‘col’ jest wspólna dla wszystkich kolumn. A więc każda nasza kolumna w wierszu ma klasę col oraz col-X. Pierwsza służy między innymi do nadawania wspólnych stylów, natomiast druga wskazuje rozmiar danej kolumny.

Tak więc dodajmy do naszego przykładu przykładowe kolumny:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

zen-brattain-e8guy

zen-brattain-e8guy by danielminschinski

Czy ciekawy sposób zaprezentowałem na układanie elastycznego layoutu za pomocą grida na flexie? Przygotowany szablon zawsze można modyfikować. A finalnie otrzymujesz szybki układ strony😉

W kolejnym materiale zaprezentuje ćwiczenie do rozwiązania – galerie z  flexboxa😉 Z góry zapraszam do materiału który opublikuje w sobotę📅💪😉

Zapraszam do subskrypcji 🔽 i polubienia mojego blogowo/usługowego ▶  fb

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!