Pojęcie “Grid” tłumacząc na z angielskiego to siatka, rusztowanie. W pewnym sensie to też layout. Jednak nazwałbym to pewny zorganizowany system rozmieszczania elementów.
Nazywając systemem “coś” to musi mieć pewną gotową konfigurację. Grid mówi nam ile maksymalnie kolumn dzielimy zawartość strony. Często stosuję się gridy 12-kolumnowe.
Kiedy mamy 12 kolumn to możemy np. dzielić wiersze zawartości na stronie na 3 części, gdzie każdy z nich “posiada” po 4 kolumny w ramach tego systemu. Tak więc, szerokość danego elementu musi być wielokrotnością 1/12 naszego grida.
Nasza siatka narzuca porządek na stronie. Wizualnie elementy na stronie stają się bardziej symetryczne.
Poniżej dodaję przykład zastosowania grida. Polecam przeanalizować
goofy-darkness-p5dq8
goofy-darkness-p5dq8 by danielminschinski
Wyznaczmy nasz kontener❕
W pierwszej kolejności zanim zbudujemy naszego grida, wyznaczmy tzw. kontener dla całej zawartości strony. Potocznie można go nazwać elementem zawierającym treści. Warto aby był wyśrodkowany tworząc prosty styl: margin: 0 auto;
Kolejną dobrą praktyką jest określenie jego szerokości (width). Co się stanie jednak gdy będziemy otwierać naszą stronę na urządzeniu mobilnym? Jeśli rozdzielczość telefonu, tableta będzie mniejsza niż nadana szerokość to pojawi się poprzeczny pasek przewijania. Możemy tego uniknąć? Pewnie że tak!
Użycie właściwości CSS: max-width: …px będzie dobrą praktyką. Ustawi szerokość kontenera maksymalnie na ilość podanych pikseli. Jeśli przeglądarka będzie węższa to szerokość tego elementu dostosuję się.
Poniżej udostępniam ostatni przykład zastosowania w którym już zastosowałem max-width! Teraz tylko dodałem obramowanie które ma zobrazować nasz kontener. Polecam zapoznać się z kodem😉
funny-moser-wb94i
funny-moser-wb94i by danielminschinski
Wiesz że to wiersz❓😉
Tłumacząc mój powyższy podtytuł – grid na stronie to zestaw kolejnych wierszy, w których umieszczamy tak zwane “klocki” treści wg naszego 12-kolumnowego układu. Elementy który nazwaliśmy klockami, w danym wierszu będą budowane z wykorzystaniem właściwości float, co może powodować “wypływanie” elementów ze swojego kontenera wiersza.
Dlatego kontenerowi wiersza o klasie row musimy nadać właściwość overflow: auto; który pozwoli utrzymać te “klocki” na miejscu.
Poniżej tak jak ostatnio dodaję przykład w którym zaznaczyłem obramowaniem o którym fragmencie jest mowa:
flamboyant-khayyam-1tues
flamboyant-khayyam-1tues by danielminschinski
Wyznaczamy kolumny
Powyższe przykłady pozwoliły nam zapoznać się ze schematem systemu grida, w którym mamy już główny kontener treści (container) oraz zawarty w nim kontener wiersza (row), których może być wiele.
Załóżmy że chcemy mieć w jednym wierszu równe 3 kolumny. Pierwszym krokiem który musimy zrobić to nadanie każdemu elementowi grida właściwość float z przesunięciem w lewo, bo elementy mają być jeden obok drugiego.
Następnie nadajemy tym samym elementom odpowiednią wartość ich szerokości podaną w procentach. Z założenia chcemy aby ich było 3 w wierszu, więc z prostych obliczeń wynika że każdy powinien mieć około 33% 😉
Poniżej zobrazowałem powyższą teorię:
polished-framework-5txqm
polished-framework-5txqm by danielminschinski
Rozmiar rozmiarowi nie równy…
Dotychczas stworzyliśmy podział wiersza z pomocą grida na trzy elementy, z których każdy “miał w sobie” 4 kolumny z naszego systemu 12-kolumnowego.
Dlatego też nazwałem tę klasę col-4, aby skojarzyć że ten element ma szerokość czterech kolumn grida. Dla pozostałych szerokości elementów grida stworzyłem w kodzie pozostałe klasy
Przyjąłem nazewnictwo klas col-[x] gdzie za x wstawiamy ilość kolumn grida. Na chwilę obecną, napisałem takie klasy, dla których 12 jest podzielne przez ich “liczbę kolumn”. Można również dorabiać także elementy z 1, 5 czy 7 kolumnami. Każdej przypisujemy szerokość w procentach wg rachunku x/12 = …%
Gotowiec na tworzenie layoutu? Jeden z wielu…😉 Spójrz na poniższy przykład:
hardcore-fog-9cliw
hardcore-fog-9cliw by danielminschinski
Grid na smartfonie😉
Nasz grid łatwo dostosować do urządzeń mobilnych. Elementy w nich nie powinny wyświetlać się w wierszach, tylko jeden pod drugim, aby treści w elementach były bardziej czytelne.
Aby zastosować taki przypadek należy użyć w CSS tak zwane media-queries, za pomocą których można między innymi ustalić poniżej jakiej rozdzielczości elementy grida mają się wyświetlać jeden pod drugim.
O responsywności będę oczywiście osobny rozdział na moim blogu tak więc zapraszam do kontynuowania ze mną przygody ze ścieżką frontend developera😃
Poniżej dodaje przykład z responsywnością elementów na stronie. Pobaw się belką za pomocą której jest możliwość zwężenia podglądu strony. Czytelne? Chyba tak co nie?😉
damp-waterfall-o97qw
damp-waterfall-o97qw by danielminschinski
Praktyka z gridem
Czas na Was Rozwiązując poniższe ćwiczenie zobaczycie, że dzięki gridowi możemy łatwiej zmieniać układ strony.
Ćwiczenie
- Stwórz nowy projekt w codesandbox.
- Stwórz diva z klasą “container”.
- W kontenerze wstaw przykładowy tytuł h1.
- Poniżej tytułu dodaj diva z klasą wiersza czyli “row”.
- W środku powyższego diva dodaj diva z klasą “col col-3 nav”.
- Wewnątrz dodaj napis “Nawigacja bądź widget”. Zamknij diva.
- Dodaj kolejnego diva w wierszu z klasą “col col-9”.
- W środku powyższego diva dodaj kolejny wiersz. W środku dodaj trzy divy z przykładowym tekstem pod klasami “col col-4”.
- Poniżej dodaj kolejne dwa wiersze z kolumnami tak jak w punkcie 8.
- Pozamykaj wszystkie divy przed przejściem do edycji stylów.
- Na początku dodaj box sizing: border box dla całej strony.
- Dla ciała dokumentu dodaj margines zerowy oraz przykładowy kolor tła.
- Wyśrodkuj nagłówek h1.
- W regule z klasą nav dodaj przykładowy kolor tła oraz wysokość na całą wysokość widoku przeglądarki (vh).
- Regułę kontenera ostyluj następująco: maksymalną szerokość na 500px, margines na górę/dół 20px oraz lewy/prawy na auto.
- Dla wiersza ustaw overflow: auto oraz margines na 0 -5px
- Dla kolumny dodaj następujące właściwości: padding góra/dół zero, lewo/prawo 5px, dolny margines 10px oraz przesunięcie do lewej.
- Następnie wg szablonu skopiuj szerokości do arkusza stylów:
- .col-1 {width: 8.334%}
.col-2 {width: 16.667%}
.col-3 {width: 25%}
.col-4 {width: 33.334%}
.col-5 {width: 41.667%}
.col-6 {width: 50%}
.col-7 {width: 58.334%}
.col-8 {width: 66.667%}
.col-9 {width: 75%}
.col-10 {width: 83.334%}
.col-11 {width: 91.667%}
.col-12 {width: 100%} - W ostatnim kroku dodaj regułę korygującą wyświetlanie na urządzeniach mobilnych. Maksymalną szerokość ustaw na 468px. Do klasy .col przypisz float: none; oraz szerokość na 100%. Tak zbudowany layout pozwala na bezproblemową obsługę strony na każdym urządzeniu😉💪
Mam nadzieje że materiały o gridzie spodobały się Wam. Przedstawiłem podstawową wiedzę opartą praktyką.
W następnym poście wg Planu nauki Frontend Developera, zajmiemy się trzecią stroną internetową którą zajmiemy się na moim blogu. Awansem już zapraszam😉
Polecam zapisywać się do Newslettera ◀◀ oraz śledzenia Fb ◀◀
PS. Post powinien być szybciej niż zwykle😃
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA