CSS Grid: Responsywny layout witryny

0:00Cześć w tej lekcji css grid zaawansowane

0:04layouty stworzymy layout prostej strony przy użyciu

0:08tylko i wyłącznie css grid i ja tutaj już troszkę ostylowałem te elemnty które obecnie

0:12widzicie na stronie wykorzystamy też sekcję albumów

0:17którą stworzyliśmy w jednej z poprzednich lekcji no i stworzymy

0:21jedną pełną kompletną stronę www oczywiście uproszczoną ale

0:26w pełni opartą na systemie siatek css grid więc

0:31zaczniemy może od przejrzenia jak wygląda struktura naszego

0:35markupu mamy tutaj header w klasie header wewnątrz niego znajduje

0:39się input o klasie search oraz znacznik

0:43o klasie account który symuluje tak jakby przycisk do

0:48zarządzania kontem użytkownika w sekcji banner mamy obrazek

0:53oraz dwa przyciski bezpośrednio w znaczniku banner następnie

0:57widzimy listę nawigacyjną składającą się z po prostu odnosników

1:03no i na samym końcu mamy nasze albumy zakodowane

1:08w poprzedniej lekcji więc zaczniemy może od tego że ustawimy

1:12że body będzie naszym kontenerem grida ponieważ widzimy że wszystkie te elementy znajdują

1:18się bezpośrednio w body no i możemy na body ustawić display grid i

1:22tak naprawdę za dużo w tym momencie się nie zmieniło oprócz tego że możemy

1:27ustawić grid gap powiedzmy na 20 pikseli i teraz wszystkie

1:31te elementy będą tutaj miały odstęp 20 pikseli między sobą

1:35dzieje się tak ponieważ stworzyliśmy grida o szerokości

1:39jednej kolumny no i jako że ma jedną kolumnę no to stworzyły

1:43się trzy wiersze ponieważ tyle mamy elementów bezpośrednio w body

1:49tutaj oczywiście będzie czwarty album który mamy zakomentowany no

1:53i grid gap wypełniło nam przestrzenie między tymi wierszami

1:57dobrze więc może ostylujmy naszą klasę banner no

2:02i wewnątrz niej znajduje się obrazek oraz dwa przyciski ustawimy

2:06że banner będzie oczywiście miało display grid i

2:11ustawimy to za pomocą grid-template-areas czyli

2:16zdefiniujemy sobie że pierwszym wierszem w bannerze

2:20będzie obrazek obrazek no i następne będzie call-to-action 1

2:25no i w drugim analogicznie również obrazek

2:29aby zajmował 2/3 przestrzeni w

2:33osi poziomej no i call to action 2 jako że tutaj mamy drugi jeszcze przycisk

2:38zapisujemy to i

2:42możemy to dodać na nasze elementy odpowiednio

2:46banner button grid-area

2:51call-to-action 1 na

2:55banerze obrazku ustawimy grid-area

3:00img ustawimy szerokość na 100%

3:05żeby nie mieć problemu z pozycjonowaniem obrazku no i możemy jeszcze użyć object-fit

3:09żeby dopasować go do kontenera żeby ładnie po

3:13prostu się wpasował okej jak już widzimy mamy ten układ o jaki prosiliśmy

3:18natomiast niejawnie ustawiany jest dalej jeden z przycisków możemy

3:23to zrobić w ten sposób że zdefiniujemy dodatkową

3:28klasę dla tego buttona albo możemy po prostu złapać go za pomocą

3:32selektora banner button nth child

3:362 i dać mu grid-area call

3:41to action 2 może nie jest to idealne rozwiązanie ponieważ jeśli

3:46faktycznie zmieni się struktura naszego markupu to będziemy musieli to poprawić no ale na ten

3:50przykład jest to wystarczające ustawimy tutaj

3:54jeszcze grid-gap może wszędzie już na 20

3:58pikseli będziemy ustawiać no i widzimy że teraz

4:02ten element faktycznie jest ułożony tak jak chcieliśmy mamy

4:07dwa przyciski po prawej stronie obrazek po lewej no i przy zwężeniu tego

4:11ekranu one oczywiście na razie się nie skalują będziemy robili tak że faktycznie

4:15będą rozszerzaly się na całą szerokość na ekranach mobilnych to już musimy

4:19zrobić przy pomocy media queries w tym konkretnym przypadku następnie

4:24przejdziemy do stylowania tej sekcji nawigacyjnej czyli

4:28navigation no i wewnątrz nich znajdują się li i

4:32każde li ma linka więc navigation również

4:37ustawiamy jako display grid ustawimy mu grid-template-columns

4:43na repeat 4

4:471fr zapisujemy możemy

4:53jeszcze ustawić grid-auto-rows powiedzmy

4:57na 100 pikseli wtedy te wiersze będą miały szerokość

5:02100 pikseli no i jako że nie zadeklarowaliśmy ich jawnie no to

5:06grid-auto-rows pokrywa nam też pierwszy grid-gap ponownie

5:10na 20 pikseli no i mamy już jakąś tam

5:14responsywność tego menu oczywiście one też

5:18się powinny składać by elementy te zajmowały całą

5:22szerokość danego wiersza możemy spróbować to zrobić przy pomocy funkcji minmax

5:26tylko że wtedy będziemy musieli podać konkretną maksymalną

5:30po prostu rozdzielczość którą chcielibyśmy tam zaaplikować

5:34powiedzmy że minimalnie może być to 0 maksymalnie 300 pikseli

5:39i tutaj nie możemy dać wtedy na stałe czwórki tylko auto-fit

5:43no i możemy to nawet wyrównać justify-content-center

5:48i wyrównaliśmy to w osi poziomej wewnątrz

5:53tego konkretnego kontenera grida bo już mamy trzy kontenery grida jednym

5:57z nich jest body w drugim jest banner i trzecim jest teraz navigation no i

6:02jak to rozszerzymy z powrotem no to oczywiście te elementy będą nam się schodziły powiedzmy

6:06że chcemy żeby tak to menu się zachowywało zostaje jeszcze zająć

6:11się tym górnym paskiem tym headerem i dostosować

6:15widoki mobilne czyli łapiemy selektorem

6:19header ustawiamy display na grid

6:23i możemy zdecydować jak chcemy ustawić nasza kolumny powiedzmy że

6:27tutaj wiemy że będą to zawsze dwa elementy więc możemy

6:31sobie powiedzieć grid-template-columns możemy

6:35użyć repeat nie musimy możemy wpisać po prostu auto

6:40auto w tym momencie mamy dwa równe

6:44tory pionowe które możemy wyrównać w osi x bądź y no

6:49i damy justify-content space-between i

6:55w tym momencie ten element będzie to dociągnięty do prawej ten element będzie dociągnięty

6:59do lewej no i będą miały przestrzeń pomiędzy sobą tak długo jak się da

7:03jest to bardzo podobne do flexboxa dobrze więc zróbmy coś

7:07z tym bannerem żeby wyglądał troszkę lepiej gdy zmiejszamy rozdzielczość możemy stworzyć

7:12regułę media query i

7:16powiedzmy że dla maksymalnie szerokości 500 pikseli najwyżej za chwilę to poprawimy chcemy

7:21aby banner miał grid-template-areas

7:27ustawiane w ten sposób czyli img

7:32img img img call to action 1 call to action

7:36one call to action one call to action one no i analogicznie dwójka zapisujemy

7:45i faktycznie to działa chociaż te elementy powinny

7:50być też w osobnych liniach prawdopodobnie nie dopisałem call

7:56to action 2 call to action jeden

8:00zobaczmy o co tutaj chodzi

8:07spróbujmy dać tutaj banner

8:14button secondary a tak tylko żeby sprawdzić czy to

8:18na pewno o to chodzi i ustawiony na

8:22banner button secondary call to action 2

8:27okej teraz działa ciekawe wydaje mi się że

8:31może to mieć coś na rzeczy z dodatkowym

8:36sterowaniem które faktycznie nadaje nam te kolory które zrobiłem wcześniej to

8:40nie zmienia faktu że nie powinno nam to nie

8:44działać ten selector jest poprawny acha nth child

8:49mogliśmy zrobić może last-child sprawdźmy

8:54nie last child też nie działa dobrze zostańmy może przy tej klasie czyli

9:00secondary no i

9:04możemy ustawić tutaj szerokość na 100% okej i banner button acha

9:08oczywiście po prostu klasa się nie zgadza powinna tutaj powinno być banner

9:12button przez dwa i tutaj ustawiamy teraz

9:17spróbujemy jeszcze raz jest jedna i nie ma drugiej

9:21last child okej teraz wszystko działa

9:25zwracajcie uwagę na nazwy własnych klas i faktycznie czy

9:29selektory chwytają te elementy o które chodzi no bo można się faktycznie troszkę zakręcić

9:34no i możemy nawet powiedzieć że tutaj chcemy mieć min i tu ustawione

9:38na 100 pikseli i wtedy niejawnie ustawiamy też wysokość

9:42całego rzędu ale możemy to zrobić z poziomu pojedynczego buttona nie musimy tego ustawiać na

9:46gridzie no i teraz gdy będziemy zwiększać i zmniejszać rozdzielczość

9:51tej witryny no to faktycznie ona się składa tutaj moglibyśmy chyba wcześniej

9:56ustawić ten breakpoint ustawmy go na te zobaczmy w firefox

10:00jaka to jest rozdzielczość 714

10:04no to ustawię na 715 pikseli to będzie nasza mobilka współczesne

10:09smartfony i tak mają duże ekrany no i faktycznie

10:13ten layout wygląda w porządku na większości rozdzielczości być

10:17może chcielibyśmy aby te elementy były wyrównane do

10:22krawędzi ale moglibyśmy to zrobić wtedy poprzez ustawienie justify-content

10:26space-between zamiast center w ten sposób jeśli

10:32to jest to czego klient mógłby chcieć albo

10:36faktycznie rozszerzanie no to możemy to oczywiście zaimplementować powiedzmy że zostawimy

10:40to przy center no i teraz wystarczy tak naprawdę wykomentować ten

10:44album który stworzyliśmy wcześniej to jest dokładnie to samo co

10:48robiliśmy w lekcji z figure no i tutaj usuwamy koniec komentarza

10:53i mamy naprawdę prostą stronę www

10:59która w zależności od rozdzielczości renderuje

11:03elementy w różny sposób musieliśmy stworzyć tylko jedną regułę

11:08media query i to tylko po to żeby zmienić tutaj grid

11:12template areas to jest jedna reguła media query no i cała reszta to jest kod powiązany

11:17z faktycznym wyświetlaniem elementów grida ważne

11:21jest to że nie musicie wcale mieć jednego grida

11:25na stronę nigdzie nie jest powiedziane że musicie mieć grida który

11:29zarządza wam każdym pojedynczym elementem witryny możecie

11:33mieć grida który w sobie ma inne gridy i oczywiście sobie pomagać

11:38w ten sposób tak jak tutaj zrobiliśmy to z body czyli nadaliśmy po prostu odstęp między

11:42pojedynczymi sekcjami zawsze 20 pikseli i zwróćcie

11:46też uwagę że ten markup jest faktycznie semantyczny nie ma tutaj żadnych dodatkowych wrapperów

11:50mamy znaczniki figure figcaption listy nienumerowane tak

11:55samo możemy mieć buttony bezpośrednio obok obrazka nie potrzebujemy wrapperów więc

11:59kod pod kątem html jest czysty w css też

12:04nie było to dużo pracy a jestem pewien że parsery czy czytniki

12:08ekranowe będą lepiej czytały taki kod niż taki który jest zbudowany na samych divach

12:12ma mnóstwo wrapperów i tak dalej i tak dalej pomijając oczywiście też fakt że

12:16jest to po prostu czytelniejsze jeszcze dla dewelopera i mniej wysyłane jest

12:20do naszych potencjalnych klientów jeśli checielibyście sprawdzić

12:24jak konkretnie stworzona jest ta strona od początku

12:28do końca to możecie przejść w sekcje base.css i

12:34tutaj będzie cały kod który odpowiada za renderowanie tego layoutu jeśli chcielibyście

12:38wprowadzić jakieś poprawki bądź usprawnić jak w tym momencie

12:42to wygląda no to możecie to zrobić w tym pliku bądź na jego podstawie