CSS Grid: Rozmiary torów

0:00W tej lekcji css grid zaawansowane layouty opowiem troszkę o

0:04tym jak ustalać rozmiary dla torów w poprzedniej

0:09lekcji ustaliliśmy już że możemy kontrolować rozmiary

0:13kolumn poprzez grid-template-columns no i tutaj do tej pory wpisywaliśmy

0:17same wartości w pikselach natomiast rozmiar kolumny może być ustalony

0:21przez dowolną jednostkę css czyli możemy wpisać sobie tutaj na

0:25przykład 20 czy 30 vw

0:29i w tym momencie będzie to 30% naszego viewport-u możemy

0:34ustalać również procenty centymetry dowolna

0:38jednostka css będzie działała zarówno dla grid-template-columns dla

0:43grid-template-rows i do większości innych właściwości powiązanych z

0:47css grid do których jeszcze dojdziemy natomiast jednostkę którą

0:51css grid nam udostępnia jest ona dostępna tylko w css grid jest

0:55jednostka fr działa ona

0:59bardzo podobnie do proporcji którą znacie z flexbox i

1:05w pewnym sensie troszkę podobnie do procentów jeśli ustawimy sobie grid-template-columns

1:10pierwszą wartość na 1fr to jak widzicie pierwsza

1:16kolumna zajęła całą dostępną przestrzeń to znaczy

1:20jeśli nie byłoby tutaj tej kolumny to

1:25szerokość tych dwóch kolumn jest równa tym dwóm kolumnom

1:29jednostka fr jest przydatna w sytuacjach kiedy potrzebujemy albo

1:34zająć całą dostępną przestrzeń albo chcemy równo podzielić nasze elementy

1:38w tym przypadku jeśli chcielibyśmy podzielić po równo powiedzmy nasze

1:42kolumny aby miały 50% szerokości i 50% szerokości to

1:47oczywiście zadziała i jeżeli tutaj wstawimy 1fr i

1:51tutaj 1fr to tak naprawdę nie widać żadnej

1:55różnicy natomiast różnica jest widoczna wtedy kiedy na

1:59przykład zdefiniujemy odstęp pomiędzy kolumnami odstęp pomiędzy

2:03kolumnami można zdefiniować za pomocą właściwości grid-grap jest

2:08to shorthand dla właściwości grid-column-gap grid-row-gap

2:13jeśli wpiszemy tutaj wartość powiedzmy w pikselach 20

2:17pikseli to nasze

2:21elementy zostaną rozstrzelone o 20 pikseli czyli mamy tak naprawdę

2:25margines z każdej strony 20 pikseli oprócz

2:29tutaj tych przy krańcach naszej siatki czyli jest to

2:33taki lepszy margines stworzony specjalnie dla

2:38css grid no i w przypadku jeżeli mamy grid-gap ustawione na 20

2:42pikseli oraz grid-template-columns ustawione na po

2:46jednym fractional unit to wszystko wygląda okej

2:50natomiast jeśli skorzystalibyśmy z 50% tutaj to już będzie

2:55różnica między naszym layoutem jak widzicie w

3:00przypadku wartości 50% 50% i ustalonej

3:04wartości dla grid-gap nasze kolumny są szersze niż

3:08przy 1fr a dlaczego się tak dzieje no bo wartości

3:13procentowe nie biorą pod uwagę po prostu grid-gap czy

3:18też potencjalnie innych właściwości css owych które mogą na to wpływać na

3:23rozmiar siatki czyli algorytm który pozwala

3:28przetłumaczyć jednostkę fr na faktyczną

3:32przestrzeń wygląda w ten sposób że bierzemy całą szerokość kontenera

3:36odejmujemy od niego wszystkie grid-gapy czy jeżeli

3:40mielibyśmy tutaj więcej kolumn to wszystkie

3:45grid-gapy zostałyby odjęte stąd 20 stąd 20

3:49i dopiero później cała przestrzeń zostałaby podzielona przez

3:533 ponieważ mamy trzy jednostki fr więc

3:58te jednostki są wobec siebie równe no i dostaniemy

4:02jakąś tam wartość w pikselach oczywiście skoro to działa na zasadzie proporcji

4:07to możemy też zdefiniować żeby druga kolumna była 2 razy większa niż pozostałe i

4:13widzimy faktycznie środkowa kolumna jest w tym momencie najszersza natomiast

4:17ponownie działa to na zasadzie gospodarowania dostępną

4:22przestrzenią w siatce tą która do tej pory nie była używana czyli

4:26jeśli wrócimy do sytuacji że mieliśmy tutaj ustawione 100 pikseli i

4:31powiedzmy 5vw no to

4:35nasz layout będzie wyglądał ten sposób jeśli dodamy kolejną kolumnę nasz layout

4:41będzie wyglądał w taki sposób natomiast mamy jeszcze możliwość

4:45zadeklarowania szerokości takiej jaką faktycznie dany

4:49element posiada czyli jeśli wpiszemy zamiast pierwszego 1fr

4:54wartość auto to ta kolumna będzie

4:58tak szeroka jak najszerszy element wewnątrz niej czyli jeśli

5:02zmienimy sobie rozmiar elementu 1 i wpiszemy css

5:07grid to cała ta kolumna dostosuje

5:13swoją szerokość do najdłuższego elementu czyli jest to takie

5:17zachowanie podobne do elementów blokowych w css gdzie elementy

5:22blokowe rozszerzają swoją długość w zależności od tego jak dużo treści w

5:26nich jest natomiast css grid pozwala nam to też zrobić w

5:30osi poziomej no i jeśli oczywiście wykorzystamy

5:34właściwość grid-template-rows

5:40również możemy ustawić

5:44tutaj wartość auto jednak jest to wartość domyślna czyli jeśli nasz

5:49wiersz nie miałby żadnej treści wtedy miałby wysokość 0 a

5:53w tym momencie ten wiersz ma taką wysokość jaką wysokość ma jej content

5:57więc jeśli dodamy tutaj jakąś dodatkową treść która przebija się do

6:01następnej linii to faktycznie rozmiar wiersza również

6:05się do tej szerokości dostosuje możemy też spróbować ustawić

6:10wartość 1fr dla pojedynczych

6:14wierszy i powiedzmy że tutaj damy 200 pikseli tutaj 100 pikseli

6:18i faktycznie drugi wiersz ustalił

6:23swoją wysokość na 200 pikseli natomiast nie ustawił wysokości

6:28pierwszego wiersza dlaczego ponieważ jednostka fr działa

6:32na zasadzie dostępnej przestrzeni a dopóki my nie zdefiniujemy jawnej

6:36wysokości na naszym gridzie no to jednostka fr

6:40w osi pionowej nie będzie działała tak jak

6:44możemy się tego spodziewać jeśli natomiast ustawimy jawnie wysokość

6:48grida na 100% albo powiedzmy po prostu

6:52800 pikseli to wtedy faktycznie widzimy

6:57że to 1fr będzie adaptowało tą wysokość

7:01jeżeli ustawimy że inne wiersze też mają mieć 1fr

7:05no to oczywiście ich rozmiar będzie się dostosowywał do tego ile

7:10jest treści w danym gridzie podsumowując ustalając

7:14rozmiary poszczególnych torów możemy korzystać z dowolnej jednostki

7:19css natomiast jeśli zależy nam na tym aby nasze layouty

7:23brały pod uwagę odstępy między pojedynczymi torami

7:27lepiej jest korzystać z jednostki fr niż z procentów jednostka

7:32fr w osi pionowej nie będzie działać tak długo jak

7:37nie zadeklarujemy wysokości na naszym gridzie oraz

7:42mamy też możliwość wykorzystania słowa kluczowego auto które

7:46będzie dostosowywało szerokość kolumny czy wiersza na podstawie

7:50treści która się faktycznie w danym elemencie znajduje zapraszam

7:55cię serdecznie do kolejnej lekcji