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.
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.
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.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:
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
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA