CSS Grid: Ustalanie rozmiarów elementów

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

0:04opowiem ci jak zmieniać rozmiary poszczególnych

0:08elementów w naszej siatce css grid jak już wiesz

0:12grid polega na zależności rodzic-dziecko

0:16no i do tej pory definiowaliśmy tylko rozmiary

0:21naszego grida poprzez właściwości takie jak grid-template-columns czy

0:25grid-template-rows no i ustawialiśmy tym samym jawne

0:29tory naszej siatki jeśli chcielibyśmy aby powiedzmy

0:33element numer 3 czyli element z klasą item

0:383 miał większą szerokość powiedzmy 400

0:43pikseli możemy zrobić to w ten sposób natomiast skutkuje

0:47to tym samym co gdybyśmy zmienili rozmiar faktycznie

0:52treści każdego elementu czyli kolumna będzie rozszerzała się do

0:56najszerszego dziecka w tej kolumnie czyli jeśli

1:00chcielibyśmy aby tylko element trzeci miał tą

1:04szerokość powiedzmy 400 pikseli no to nie możemy tego w ten sposób zrobić

1:08bo tak rozszerzamy całą kolumnę co można zrobić jest

1:14to składnia która przechodzi z css grid i

1:18możemy ustalić rozmiar elementu w

1:23osi x czyli ile kolumn będzie

1:27zajmował dany element i możemy to zrobić za pomocą słówka kluczowego span

1:31no i podając tutaj liczbę kolumn którą dany element ma

1:35zajmować czyli jeśli wpiszemy sobie span 2 na item numer 3

1:39to możesz zauważyć że element

1:43trzeci jest tak szeroki jak siódemka i ósemka razem

1:47czyli po prostu zajmuje dwie kolumny tutaj mamy jak

1:51sobie otworzymy w devtoolsach podgląd torów no to

1:56faktycznie mamy te 5 torów natomiast 3 rozszerza

2:00się na dwa z nich jeśli analogicznie jeśli zwiększymy

2:04tutaj oczywiście liczbę tych kolumn no to nasz element będzie szerszy

2:08jeśli zwiększymy tą liczbę tak że element nie będzie

2:13już się mieścił w naszej siatce czyli w tym momencie 4 css grid

2:17ustawił nam element o identyfikatorze 3 w pierwszym wolnym

2:21miejscu gdzie faktycznie może wstawić go na cztery kolumny no tutaj już nie mógł

2:25bo mieliśmy tylko 3 kolumny dostępne no i wstawił to

2:29w drugim wierszu i zajął pierwsze 4 kolumny jeżeli

2:33zrobimy span 5 no to oczywiście element numer 3 zajmie całą

2:38dostępną przestrzeń w danym wierszu natomiast co się stanie jeżeli damy span

2:43większy niż faktycznie cały nasz grid czyli tutaj definiujemy że

2:47mamy 5 kolumn co się stanie jeżeli zdefiniujemy że dany element ma

2:51się rozszerzyć na więcej niż 5 kolumn powiedzmy że wpiszemy tutaj 8 i grid

2:57w tym momencie stworzył nam dodatkowe kolumny

3:01jak widzicie tutaj tą linią twardą definiujemy 5

3:05kolumn natomiast te trzy dodatkowe które wynikają z tego że tutaj daliśmy

3:098 a tutaj mamy 5 więc różnica to 3 czyli 3 dodatkowe

3:13kolumny zostały stworzone przez grida i są to tak samo implicit

3:18columns tak samo jak mieliśmy implicit rows czyli niejawne

3:22kolumny stworzone przez to że css grid próbuje zrozumieć o co

3:26nam chodzi no i stworzył nam taki oto layout jeśli

3:30natomiast korzystamy z takich prostszych sytuacji faktycznie i

3:35ustalamy szerokość danego elementu na dwie kolumny no

3:39to nie ma tego problemu grid nam się nie rozszerza no

3:43i możemy ustalić tak naprawdę że co drugi element czyli korzystamy

3:47z pseudoselektora nth child na

3:52się rozszerzyć na dwie kolumny no to mamy w tym momencie taki layout

3:56no ale tutaj mamy dziury te dziury się biorą stąd ponieważ grid

4:00renderując się domyślnie nie patrzy w tył czyli grid

4:05ustawił nam pierwszy element ze spanem jeden drugi element ze

4:09spanem dwa trzeci element ze spanem jeden no i mamy

4:13już tylko jeden jedną kolumnę dostępną w tym konkretnym wierszu a

4:17kolejny element ma już span 2 dlatego

4:21leci do następnej linii i dlatego zostaje nam tutaj kropeczka

4:26jesteśmy w stanie te puste pola wypełnić

4:30za pomocą grid-auto-flow natomiast o tym będziemy mówili trochę

4:34później więc przejdźmy jeszcze raz do

4:38tego ustawienia spanów na konkretnych elementach jeśli uznamy

4:42że chcielibyśmy aby nasz element rozszerzał się nie tylko w

4:46osi x ale również w osi y możemy

4:50wykorzystać do tego grid-row czyli ustalamy

4:54że element ma się rozszerzyć powiedzmy na trzy wiersze

4:58i po zapisaniu mamy taki layout może jeżeli na razie wykomentujemy

5:03tą kolumnę to będzie to lepiej widoczne i mamy faktycznie

5:07już teraz dosyć ciekawy layout czyli jedynka ma wysokość

5:11jednego wiersza dwójka ma wysokość trzech wierszy no tutaj

5:15dlatego tutaj mamy tą przestrzeń dodatkową trójka jest normalnie czwórka znowu

5:19jest większa piątka jest normalna szóstka znowu jest większa

5:23tutaj nie wstawiają się elementy ponieważ ta dwójka zajmuje więcej miejsca

5:27no i tak generalnie layout się układa

5:32akurat nam się złożyło tak że mamy fajny ładny prostokąt i

5:36nie ma żadnych dziur natomiast widzimy teraz że ta numeracja przestaje

5:41mieć większy sens ponieważ mamy 12345 tutaj jest szóstka

5:45tutaj nagle jest dziesiątka siódemka ósemka dziewiątka jedenastka

5:4912 13 14 no i to się tak rozchodzi niestety to

5:54jest jedna z wad css grid że niestety elementy mogą

5:59mieć nie taką kolejność jaką byśmy się spodziewali jeżeli korzystamy

6:03z zaawansowanych właściwości pobawmy się jeszcze trochę tym przykładem

6:07czyli ustalimy że co drugie dziecko albo powiedzmy

6:11co trzecie będzie miało szerokość 2 i

6:17co piąte będzie miało wysokość

6:22czyli tak na pewno musimy ustawić grid-row ponieważ będziemy zajmować więcej

6:27wierszy równą no powiedzmy

6:31też dwóm jednostkom tutaj musimy użyć pseudoklasy

6:36a nie klasy zapisujemy no i mamy taki oto layout

6:40zmieniając tylko te pojedyncze dwie wartości możemy zupełnie zmienić

6:45sposób renderowania naszego layoutu i oczywiście

6:49możemy też pojedyncze elementy łapać za pomocą normalnych selektorów

6:53i ustalić im inne właściwości

6:58na przykład span 5 i w tym momencie element

7:0220 będzie rozciągał się na całą szerokość naszego grida ponieważ mamy

7:06zdefiniowane 5 kolumn ale jeśli zmienimy ilość kolumn powiedzmy w tym

7:10momencie na 8 no to oczywiście layout

7:15układa się nam zupełnie inaczej podsumowując css-grid

7:19daje nam możliwość definiowania rozmiarów poszczególnych elementów w

7:23bardzo elastyczny sposób ponieważ zmieniamy tylko pojedyncze właściwości a

7:27zmienia się cały layout natomiast musimy w bardzo przemyślany sposób tworzyć

7:31te layouty by najmniejsza zmiana nie powodowała

7:35nam takiego chaosu jak tutaj w tym momencie widzimy w

7:39kolejnej lekcji opowiem o tym jak umieszczać konkretne elementy

7:43wewnątrz grid containera na konkretnym torze

7:47czyli kolumnie bądź wierszu