CSS Grid: Obszary szablonowe

0:00Cześć do tej pory w kursie css grid zaawansowane layouty

0:04omówiliśmy wszystkie podstawowe właściwości powiązane

0:08z tworzeniem kolumn wierszy tracków układaniem ich na

0:13siatce oraz ustalaniem ich rozmiarów natomiast do

0:17tej pory zaprezentowaliśmy tylko jedną z możliwych dróg deklaracji

0:21tego typu layoutów drugą są tak zwane obszary szablonowe czyli

0:25grid-template-areas i za ich pomocą możemy

0:30deklarować zarówno wiersze i kolumny natomiast nie musimy wpisywać

0:35tutaj jawnych szerokości czy wysokości ale

0:39możemy nazwać je według naszego uznania czyli jeśli mamy

0:43taką strukturę jak tutaj czyli mamy kontener wewnątrz którego

0:47jest header jakaś treść footer i sidebar no

0:52to możemy stworzyć takie nazwy takie obszary w naszym gridzie

0:56jak to robimy otwieramy ciąg znaków otwieramy stringa

1:00i wewnątrz niego deklarujemy strefy możemy

1:04zadeklarować sobie że chcemy 3 kolumny i chcemy aby header

1:08zajmował wszystkie trzy i był w pierwszym wierszu więc wpiszemy

1:13sobie header header header i tym samym tworzymy 3

1:17kolumny i ustalamy że nazwa tego obszaru będzie

1:22to header jeśli chcemy dać kolejne wiersze do naszej deklaracji

1:26możemy to zrobić poprzez dodanie kolejnego ciągu znaków czyli

1:31jeśli chcielibyśmy żeby treść zajmowała tylko 2/3 całego

1:35wiersza nr 2 no to możemy wpisać sobie tutaj content

1:40content i trzecią kolumnę zagospodarować na coś innego na

1:44przykład na sidebar i możemy dodawać i

1:48dodawać kolejne definicje każdy wiersz jest oddzielony dwoma

1:52cudzysłowiami i jest jakby osobnym ciągiem znaków możemy go zapisać w

1:56jednej linii czyli w ten sposób natomiast

2:01dla czytelności lepiej jest to rozbijać na

2:05osobne linie dla każdego wiersza czyli stwórzmy sobie

2:09jeszcze ostatni wiersz ze stopką jak

2:15zapiszemy to widzimy że już coś się stało w naszym layout'cie

2:19oczywiście nie ma to żadnego sensu bo header chcieliśmy żeby

2:23zajmował 3 kolumny a w tym momencie zajmuje tylko jedną natomiast grid

2:29dostosował treść którą znalazł wewnątrz siebie wewnątrz

2:33kontenera no i stworzył nam 3 kolumny jako że żadna

2:37z naszych elementów czyli ani header ani content

2:41ani footer nie są określone w jakich strefach mają się renderować no

2:45to renderują się tak liniowo jedna po drugiej jeśli chcielibyśmy aby header

2:49faktycznie znajdował się w pierwszym wierszu no to musimy na

2:53klasie header ustawić grid-area czyli przypisać do

2:57konkretnego elementu html konkretną nazwę strefy css

3:02grid czyli jak wpiszemy tutaj header możemy to zamknąć w cudzysłowia

3:06i potraktować jako stringa możemy też zapisać to w ten sposób zapiszemy

3:11i widać że faktycznie w tym momencie header zajął

3:153 kolumny i znajduje się w pierwszym wierszu co prawda

3:19treść sidebar i stopka dalej są źle ustawione ale

3:23dzieje się tak dlatego bo nie zadeklarowaliśmy jeszcze gdzie te elementy

3:27mają się renderować nie przypisaliśmy konkretnych grid-area

3:31do pozostałych selektorów css'owych czyli zrobimy to teraz szybciutko

3:36dla footera ustawimy grid-area footer dla

3:41sidebara ustawimy grid-area sidebar

3:46po zapisaniu widzimy że faktycznie ten layout

3:50który sobie tutaj zakodowaliśmy jest spójny z tym

3:54który jest faktycznie wyrenderowany jest to zupełnie inne podejście niż w przypadku korzystania

3:59z grid-template-columns grid-template-rows ponieważ w taki

4:03bardziej wizualny sposób możemy tworzyć nasze layouty jedni

4:08to lubią inni nie ja widzę plusy zastosowania grid-template-areas

4:13w przypadku gdzie korzystanie z grid-template-columns czy rows

4:17może być mniej czytelne i jest to jak najbardziej poprawna wspierana składnia

4:21więc jeżeli podoba ci się ten sposób zapisu nie wahaj się go użyć i

4:26notacja grid-template-areas jest o tyle

4:30wygodna że możemy wewnątrz media query powiedzmy

4:46do 700 pikseli zmniejszyć

4:52zmienić sposób renderowania całej

4:56strony czyli skopiujemy sobie grid-template-areas oczywiście

5:04musimy to zrobić na kontenerze przesuwamy

5:09to w odpowiednie miejsce no i teraz możemy sprawdzić w

5:13ten sposób żeby elementy rozpychały się na

5:17całą możliwą szerokość czyli możemy zmienić tutaj sidebar

5:22na content footer

5:26wyświetlić na samym dole no i sidebar dodać jako

5:30kolejny wiersz po

5:34zapisaniu dopóki jesteśmy powyżej 700

5:39pikseli wygląda wszystko tak samo ale jeśli zmniejszymy sobie

5:43ten layout no to faktycznie widzimy że

5:47elementy wyświetlają się jeden pod drugim nie

5:51jestem pewien dlaczego tutaj nasz content wyświetla

5:56się w ten sposób może włączymy tutaj siatkę widzę

6:01że doszły doszły nam tutaj dodatkowe kolumny

6:06jest to całkiem możliwe że po prostu to

6:10pierwotne stylowanie które zamieściłem przed

6:14rozpoczęciem lekcji wpływa nam na to zobaczmy gdzie jest w ogóle acha

6:18bo nie mamy zadeklarowanego kontentu nigdzie no oczywiście trzeba jeszcze zadeklarować

6:23content grid-area content i

6:28w tym momencie wszystko będzie dobrze dopasowane w tym

6:33momencie wszystko wyglądało dobrze ponieważ pomimo tego że nie zadeklarowaliśmy na klasie

6:37content grid-area content to pozostałe elementy były

6:42poprawnie zadeklarowane natomiast jeśli zmniejszyliśmy breakpoint to

6:47mieliśmy cały wiersz strefy która nie została nazwana i nie została

6:51wykorzystana dlatego pomimo tego że na większym breakpoincie to

6:56działało na mniejszym przestało i wniosek jest tylko

7:00taki aby pamiętać by wykorzystać faktycznie wszystkie grid-area

7:05które zostały zadeklarowane ponieważ jeśli tego nie zrobicie no to

7:09później będziecie musieli debugować dlaczego ten

7:14konkretny grid layout nie działa no i na tym przykładzie widać

7:18jak w prosty sposób przy pomocy media queries można zmienić cały design

7:23naszego kontenera naszej siatki w sposób w który tak

7:28naprawdę nie byłoby możliwe przy użyciu innych technik pozycjonowania ponieważ

7:32jeśli stworzymy sobie jeszcze jeden selektor media query i

7:38ustawimy min-width na

7:42powiedzmy 1024 piksele

7:46to możemy sprawić żeby nasz header miał tutaj

7:52mniej przestrzeni i tutaj wypełnimy to

7:56sidebarem tutaj

8:00też damy sidebar zapiszemy no

8:04i teraz w momencie jeśli przekroczymy ten breakpoint i zachowamy

8:09poprawną składnie tego grid-template-areas to nam się ten sidebar

8:13wyświetli ten sidebar jeszcze teraz nie zadziałał ponieważ stworzyłem

8:17nieprostokątny layout danego elementu czyli

8:22jak widać tutaj sidebar ma 100% danego wiersza i

8:26jakiś fragment danej kolumny każdy

8:30grid element każde dziecko grida musi być prostokątem nie

8:34możemy tworzyć tego typu przykładów czyli tutaj musielibyśmy jeszcze

8:38wyrównać content aby też był prostokątem czyli mamy tutaj

8:43kwadracik tutaj mamy też prostokąt no

8:48i tutaj jest prostokąt zapiszemy na tej rozdzielczości mamy

8:53standardowy layout na mobilce mamy taki no i na większej

8:57rozdzielczości sidebar się rozszerza jeszcze jedną

9:01ważną rzeczą którą można zrobić z tą notacją i nie jest ona możliwa z

9:05pozostałymi jest wstawienie takiego placeholdera czyli jeśli

9:09nie chcemy żeby dane miejsce w gridzie było zajmowane przez jakikolwiek element

9:13możemy wstawić kropkę czyli zaznaczając dowolne

9:19miejsce w grid template-areas możemy sprawić że na danej

9:23rozdzielczości kolumna będzie pusta natomiast cała

9:29struktura torów będzie zachowana grid-template-areas

9:34to na pewno bardzo elastyczne rozwiązanie które pozwoli

9:38w prosty sposób tworzyć skomplikowane layouty natomiast

9:42korzystanie z ciągów znaków ascii jako

9:46referencji do naszych obszarów w siatce również

9:52może być problematyczne w debugowaniu czy w tworzeniu bardzo

9:56niestandardowych rozwiązań gdzie po prostu nie możemy tak dobrze

10:00określić położenia naszych elementów w kolejnej lekcji powiem troszkę

10:04więcej o nazywaniu konkretnych linii i jakie nazwy

10:08danych stref dostajemy za darmo jeśli korzystamy z css grida