CSS Grid: Pozycjonowanie na krańcach obszarów

0:00Do tej pory w kursie css grid zaawansowane layouty dowiedzieliśmy

0:04się czym są tracki wiersze kolumny o tym że składają się z

0:08linii każda linia ma swoją numerację możemy ustawiać

0:12elementy według tych linii zmieniać ich rozmiar oraz

0:17poznaliśmy obszary szablonowe czyli grid-template-areas

0:21które pozwalają nam bardzo wymownie poprzez

0:25korzystanie z dowolnego ciągu znaków na przykład header header header definiować

0:30jak nasz layout ma wyglądać w poprzedniej lekcji wspomniałem że przy

0:34okazji definicji w ten sposób czyli poprzez grid-template-areas

0:39dostajemy w gratisie od css grid pewne

0:43rejony które nie są jawnie zakodowane jeśli otworzymy narzędzia

0:47deweloperskie firefoxa i włączymy sobie debugowanie i będziemy

0:52mieli zaznaczone tutaj nazwy obszarów no to będziemy widzieli

0:56te grid-template-areas które zakodowaliśmy faktycznie naniesione

1:01na naszą siatkę i o ile oczywistym jest to że możemy wziąć item

1:06powiedzmy siódmy wstawić mu background na

1:10niebieski i dać mu grid-area

1:14na content i on się wtedy nam przesunie faktycznie

1:19w ten obszar który zadeklarowaliśmy że ma być strefą o nazwie content

1:23o tyle mniej oczywistym jest to że możemy wypozycjonować

1:28nasze elementy w odniesieniu do tego content ale nie odwołując

1:32się do niego bezpośrednio co to znaczy jeśli ustawimy sobie

1:36grid-column na początkową lokację jako content

1:41start wtedy

1:45item siódmy rozpocznie się tam gdzie

1:49jest początek kolumny content czyli w tym miejscu jeśli

1:54zakończymy go na content end to

1:59wtedy skończy się również na tym miejscu natomiast jego pozycja

2:04wiersza pozostanie bez zmian dlatego też nie wypełnił nam góry jeśli

2:08ustawimy sobie grid column content

2:12start content end

2:17tutaj chodziło mi oczywiście o row żeby w osi pionowej

2:21poszerzyć ten element to jest to tak

2:25naprawdę ekwiwalent tego jak byśmy napisali grid-area content

2:29czyli możemy się odwoływać do konkretnej strefy

2:34szablonowej do ich początku i końca poprzez

2:38suffixy start oraz end do

2:42czego to jest przydatne no bo o ile możemy ustawić sobie że powiedzmy item

2:48pierwszy będzie naszym grid-area content

2:53no i następne też jeszcze wypozycjonujemy w taki sam sposób czy powiedzmy drugi

2:58będzie na footerze trzeci

3:03będzie na sidebarze czwarty

3:08będzie na headerze i faktycznie

3:12w tym momencie nam się to ułożyło w ten sposób może przez tą kolorystykę

3:16nie jest to bardzo widoczne możemy zmienić kolor sidebara na background

3:21powiedzmy o

3:26użyjemy po prostu koloru czerwonego i cała

3:30reszta jest już układana za pomocą torów niejawnych one są automatycznie

3:34generowane i układane w ten sposób to możemy

3:38item siódmy wypozycjonować na przykład w ten sposób że będzie

3:42rozchodził się na cały content tylko

3:46tą część czyli bez drugiego wiersza oraz

3:50na tą część sidebara możemy to potraktować jako notyfikację

3:55czyli mamy jakiś layout strony ma nagłówek treść

3:59sidebar footer i chcemy wyświetlić notyfikacje w tym miejscu no to

4:03możemy to zrobić deklarując grid-column

4:07content start i kończąc na sidebar

4:12end ponieważ tu jest sidebar

4:16end tutaj jest sidebar start ale w tym samym miejscu jest

4:21też content end no i tutaj mamy content start gdy to

4:25zapiszemy to widzimy że faktycznie rozciągnęło nam się to tak

4:29jak poprosiliśmy ale nie wsunęło się na drugi wiersz co

4:34się stanie jeśli spróbujemy zadeklarować kilka elementów w

4:38jednej siatce w tym samym miejscu grid-column row

4:45content start bo tak samo wiersze

4:50mają content start tutaj to tak samo jest z sidebar

4:54start no i tutaj jest dla wierszy content

4:58end i sidebar end piszemy sidebar

5:04end w tym momencie zajął nam całe

5:08miejsce dostępne to że on jest na wierzchu wynika

5:13ze stacking kontekstu czyli

5:17generalnie pozycja w markupie wpływa

5:21na to który element ma pierwszeństwo i wyświetla się nad którym możemy to oczywiście

5:26manipulować poprzez z-index podając na przykład ujemną wartość i wtedy

5:30będzie widoczne to co jest wcześniej w markupie natomiast

5:34nam to pasuje akurat że ta siódemka jest na wierzchu wystarczy teraz tylko że

5:38zmienimy opacity na powiedzmy połowę i

5:43sprawimy że row będzie się zaczynał na

5:47content start ale nie będziemy jawnie podawać jego zakończenia

5:51i w tym momencie faktycznie widać że ta siódemka tutaj jest

5:56tak jakby wypozycjonowana absolutnie ponieważ znajduje się nad naszą

6:00siatką ale dalej widzimy elementy które

6:05są wypozycjonowane na gridzie i znajdują się pod nią może

6:09byłoby to troszkę bardziej czytelne jeśli skorzystalibyśmy tutaj koloru czarnego

6:14o mniejszej przezroczystości zmienili kolor na biały wtedy

6:18możemy zmienić sobie na przykład treść itema numer 7

6:22na notification i w tym momencie nawet widać że

6:26to mogłoby być powiadomienie i oczywiście takie powiadomienie możemy później albo

6:31ukryć za pomocą display none albo zupełnie

6:35usunąć z markupu to już zależy od przypadku jaki chcemy obrać czyli

6:40deklarując grid-template-areas dostajemy w gratisie do

6:45każdego template-area suffix start oraz

6:49end czyli moglibyśmy się odwołać do footer end do footer

6:53start do header end do header start i tak jak się odwoływaliśmy

6:57do content oraz sidebar oczywiście te

7:01nazwy nie zawsze muszą odzwierciedlać to co

7:05w danym miejscu powinno się znaleźć jeśli chcielibyśmy możemy zmienić na

7:10przykład nazwę header na site-start

7:14i wtedy będziemy mogli odwoływać

7:18się pozycjonując nasze elementy na przykład przez site-star

7:23ale o tym opowiem w następnej lekcji gdzie

7:27będziemy mówili o nazywaniu konkretnych linii