CSS: Umieszczanie elementów na siatce

0:00W tej lekcji opowiem o umieszczeniu

0:02elementów na siatce którą już sobie wcześniej zdefiniował.

0:07Jak wspomniałem w poprzedniej lekcji sam

0:09fakt że jesteśmy w stanie kontrolować ilość kolumn czy ilość wierszy

0:13dynamicznie bądź dynamicznie nie jest jeszcze największym powodem żeby

0:19korzystać z CSS bida to co CSS GRID robi naprawdę dobrze.

0:25To pozwala nam umieszczać te elementy

0:28wzdłuż tej siatki według naszych instrukcji i faktycznie te instrukcje

0:32możemy przełączać sobie przy pomocy media jest naprawdę wygodnie i cały nasz leje

0:37odbędzie się ładnie składał w osobne gry na osobnych rozdzielczość.

0:42W związku z czym ja tutaj zmieniłem troszkę przykład.

0:46I stworzyłem dodatkowe klasy dla każdego z naszych elementów bo to jest jakby lepszy

0:51sposób niż celowanie po sektorach kolejności tzn.

0:57Niż celowanie po pierwszym elemencie drugim elemencie.

1:00Lepiej jest dać klasę i mieć kontrolę nad

1:02tym który element będziemy symulować nawet jeżeli on znajdzie się gdzieś na końcu tej

1:07listy no i będziemy go wykorzystywać żeby faktycznie te konkretne elementy

1:11umieszczać na siatce w różny sposób czyli jeśli ustawiamy sobie

1:16tu to jak zrobić aby ten element był dłuższy i zajmował dwa wiersze czyli tak

1:24jak mamy w tabelach Rosjan to jesteśmy w stanie też zdefiniować tak aby element

1:29zajmował więcej niż jedną kolumnę czy wiersz to aby umieścić element na quizie

1:35czy to w osi X X czy Y jesteśmy w stanie wykorzystać do tego

1:40właściwości gry Odrą czyli tutaj już bez Temple Temple są tylko dla kontenera i są

1:46jakby faktycznie szablony tego jak nasz Grid ma wyglądać.

1:49Natomiast na elementach gry jesteśmy w stanie ustawić Grid

1:53i zmienić jego domyślne położenie kierowanej stronie czyli jeśli zrobimy grę

1:58grą na pan Tusk pan to jest takie specjalne słowo też stworzone dla CSS Live

2:05które pozwala po prostu wziąć obecne położenie elementu no i poszerzyć go o

2:09podaną wartość tutaj jako drugi parametry po spacji zapisujemy.

2:13No i faktycznie widać że ten element rozszerzył się na dwa wiersze.

2:18Jest analogicznie do tego oczywiście GRID kolumn.

2:23Jesteśmy w stanie tak samo dać.

2:25Pan tu.

2:27I w tym momencie nasz element zajmuje tak

2:29naprawdę 2 na 2 szerokości i wysokości w stosunku do innych elementów.

2:36Co możemy dalej z tym zrobić.

2:37Zobaczmy.

2:40Powiedzmy 8.

2:43Chcielibyśmy aby on wygenerował się w innym miejscu czyli tak troszkę

2:46analogicznie do tego co mogliśmy zrobić z CSS Flex boksem przy pomocy

2:50właściwości ordery i kolejność ustalimy GRID roku powiedzmy na bo chcielibyśmy

2:57żeby on się reżyserował tutaj tą jedną linijki wyżej.

3:00No to możemy zmienić domyślny rosół z

3:04dwójki bo to jest drugie jakby początek drugiego roku tutaj jest początek

3:09pierwszego roku to jest początek drugiego roku.

3:11To bardzo dobrze widać w narzędziach deweloperskich może nie ma bardziej

3:15Firefoxa i też w kursie gdzie omawiać CSS widać dogłębnie.

3:20Korzystam z Firefoksa zamiast Sulima

3:22ponieważ po prostu Firefox ma lepsze narzędzia deweloperskie.

3:25Na pewno Chrome też są rozszerzenia bądź

3:28opcje flagi eksperymentalne które można sobie włączyć.

3:32Natomiast według mnie osobiście GRID lecz lepiej debatować na Firefoksa

3:38chociaż też jego wsparcie jest tam lepsze więc warto sprawdzić jak się

3:41czuje na innych przeglądarkach natomiast widzimy tutaj tę linię i.

3:45Tutaj jest początek naszego rocka tutaj jest koniec tego roku.

3:51No i tu jest koniec numer dwa czyli jeśli sobie wystawimy GRID grą na 1.

4:00I deklarujemy że ma się on skończyć na.

4:04Roku 2 czyli tutaj.

4:07No to ten element nam wskoczy wyżej.

4:09Co prawda wskoczył nam na początek.

4:11Jestem ciekawy w sumie czemu.

4:14Prawdopodobnie dlatego że po prostu musi

4:15sobie to policzyć razem z innymi elementami.

4:18Ale możemy też GRID kolumny ustawić czyli

4:20początek umiejscowienia tego elementu będzie nie na pierwszym miejscu tylko

4:25powiedzmy na minus 1 czyli liczymy od końca czyli on powinien się od tej strony

4:30zarejestrować i powiedzmy na tym razem na szerokość dwóch czyli nie

4:34deklarujemy początku i końca w odniesieniu do.

4:38Początku i końca danego wiersza tylko mówimy gdzie ma się zacząć i

4:45ile ma zająć miejsca dany element czyli powiedzmy że mamy trójkę za piszemy.

4:52I tutaj.

4:54GRID stworzył nam niejawny dodatkowy tor który jest bardzo cienki łódki

5:01o niejawnych torach też mówi w osobnym kursie.

5:05Generalnie jeżeli GRID nie jest w stanie

5:07naszych wymagań wręcz kierować po prostu nie mają one sensu w danym dniu porcie.

5:13To on będzie tworzył takie niejawne wraki które tutaj będą powodowały że ten element

5:17nie będzie wyglądał już tak niestety równo.

5:19Możemy to po prostu naprawić zmniejszając pan danego elementu.

5:26Ale możemy też po prostu zadeklarować że

5:28ten element powinien się skończyć na minus trzeciej czyli na tej

5:33kolumnie czyli jest tutaj kilka możliwości umiejscowienia elementów na siatce.

5:38Jedna to jest po prostu deklarowane

5:41ile ma zająć dany element w jego obecnej pozycji.

5:45I to działa zarówno dla gry GRID.

5:49Albo możemy umieścić element bazując na numeracji danego toru czyli.

5:57GRID 8 jest umiejscowione wbrew temu jak jest umiejscowione w Markach.

6:02Jeżeli to komentujemy to zobaczymy gdzie

6:03on był domyślnie był na drugim wierszu czwartej kolumnie.

6:08Natomiast jeśli to zmienimy w ten sposób znajduje się on na pierwszym wierszu

6:12ponieważ pierwszy wiersz ma numerację od 1 do 2.

6:16To jest jedyne oczka tzw.

6:18oczka i to jest nasz pierwszy wiersz.

6:22No i kolumnę ma wziąć ostatnią ale ma wziąć tak naprawdę dwie ostatnie kolumny

6:27bo zaczynamy od ostatniej kolumny pierwszej minus odwraca nam numerację

6:32czyli bierzemy go stąd i ma wziąć to trójkę czyli tutaj jest 1 tutaj jest 2.

6:39Widzimy to na siódemce.

6:41Albo jak sami sobie to podkreślamy to

6:43widać że tutaj jest dwójka ta ósemka jest w tym momencie określona.

6:47Więc to jest wycieczka.

6:48I tu jest trójka CSS daje nam naprawdę duże możliwości układania elementów

6:54na siatce a to nie koniec bo jeżeli skorzystamy na przykład z Great Temple.

7:01Arias

7:03jest alternatywną.

7:05Opcją ustawiania elementów na siatce.

7:08Ja tylko pokrótce to opowiem.

7:10Możemy stworzyć tak naprawdę sytuacje

7:13gdzie elementy będą układane wizualnie tak jak my sobie tego życzymy

7:17czyli możemy sobie tutaj wpisać Heather Wheeler Heather.

7:23Po spacji w kolejnych słowach dać content content może nie content tylko Exit.

7:30I takie mają.

7:32Taka deklaracja ma być powtarzana dla

7:34dwóch wierszy i tak naprawdę na końcu może być futer futer futer.

7:39I skąd ma wiedzieć co to jest HDR co to jest content.

7:44Co to jest. Co

7:46musimy na pojedynczym git ustawić jego wartość czyli komentujemy te

7:52właściwości na razie ponieważ już nie ustawiamy ich przy użyciu

7:57Great Temple Columbus i gitarą tylko używamy GRID Arias.

8:02Jeśli piszemy tutaj GRID seria content bez żadnych cudzysłowie tym razem

8:07to faktycznie ten element będzie rozciągnięty tak jak sobie tego zażyczy.

8:12Tutaj problemem jest takim że tak naprawdę każdy z tych elementów powinien mieć

8:18jakąś serię zadeklarowana ponieważ jeżeli jej nie będzie no to GRID ustawi

8:24dany element albo napęd na początku albo na końcu danego kontenera w zależności od

8:30tego jak po prostu będzie miał miejsce w związku z czym jeżeli nie mamy pewności

8:34że każdy z tych elementów które jest wewnątrz naszego kontenera GRID

8:39będzie miał przypisaną GRID R.G. Ja nie polecam korzystać z GRID PET Arias.

8:44I tutaj literówki Arias oczywiście

8:47możemy zobaczyć jak to się wędruje zobaczmy GRID RIA HDR.

8:56Powiedzmy.

8:583.

8:59Seria futer.

9:03Wójtem.

9:084. Niech będzie 4 GRID seria content content.

9:14Jest to futer też jest ale nie mamy za piszemy zobaczmy co się stanie.

9:20I faktycznie widzimy że dwójka wygenerowała się tam gdzie chcieliśmy bo

9:25dwójka to jest nasz kontent więc pasuje wizualnie do tego co tutaj zadeklarowali.

9:30My mamy zadeklarowany jawnie trzy kolumny i cztery wiersze.

9:34To też jest odzwierciedleniem oczywiście w samej przeglądarce.

9:38Są trzy wiersze tutaj widzimy ósemka jest

9:42oddzielona dwoma liniami przerywane dwa oczka ma na sobie

9:46też przecięcie to znaczy że zajmuje 2 na 2 szerokości no i pozostałe elementy ułożyły

9:53się na samym końcu ponieważ nie miały za deklarowanego GRID.

9:56Seria no i oczywiście też możemy jakoś oscylować.

9:59Natomiast ja.

10:01Osobiście uważam że GRID Arias jest fajnym rozwiązaniem jest naprawdę

10:07czytelne i to jest duży plus tego podejścia.

10:10Natomiast warto pamiętać że jeżeli

10:13będziemy mieli sytuację że na przykład dane elementy nie będą wypełniały miejsca

10:18kropka to jest tak jakby Holder który mówi że dany element powinien być nie zajęty

10:24przez GRID Iberia to wtedy CSS GRID nie podpisane elementy będzie nam stawiał

10:32w związku z czym byłbym po prostu na to uważny i ostrożny.

10:38No i oczywiście ten temat można zgłębić jeszcze przez grube godziny w związku z

10:44czym ja tej lekcji już nie będę przedłużał.

10:47Gorąco zachęcam do testowania obu podejść i GRID Elias i klasycznego GRID LED

10:55kolumny i umiejscowienia elementów na siatce.

10:57Polecam też zapoznać się z różnicą między dawnymi i niedawnymi torami niejawnym

11:04czyli tymi których faktycznie nie zapisujemy w naszym kodzie.

11:07Ale one muszą się pojawić bo mamy więcej treści niż się tego spodziewaliśmy.

11:12W naszym kodzie CSS no i tak naprawdę praktyka czyni mistrza eksperymentuje się

11:17ze swoimi latami i na pewno CSS GRID stanie się dla was.

11:21Narzędziem z którego będziecie chcieli korzystać jak najczęściej.

11:24Jeżeli tylko będzie dla niego wsparcia.