CSS Grid: Kolumny i wiersze

0:00Możemy już przejść do faktycznej pracy z gridem jak wiesz

0:04no grid jest to z angielskiego siatka czyli możemy pociąć

0:08dowolny element który ma ustawiony display na grid na

0:13wiersze i kolumny i w tym momencie domyślnie css

0:17grid tworzy jedną kolumnę aby zdefiniować inną liczbę

0:22kolumn musimy użyć do tego polecenia grid-template-columns

0:26czyli siatka szablon kolumny i

0:31składnia tego tych właściwości jest taka że podajemy rozmiar

0:35w dowolnej jednostce css tego jak chcemy by nasze

0:39kolumny były szerokie jeśli wpiszemy grid-template-columns ustawione na 100 pikseli

0:43to stworzy nam się jedna kolumna o szerokości 100 pikseli jeśli

0:48wpisalibyśmy drugą wartość tutaj czyli

0:52na przykład 200 pikseli to stworzą się dwie kolumny czyli

0:57każda wartość którą wpiszemy po spacji to grid-template-columns

1:01będzie kolejną kolumną o tej właśnie szerokości czyli

1:05możemy stworzyć sobie powiedzmy trzy kolumny po 300 pikseli

1:09możemy nawet w następnej linii to sobie zapisać żeby było czytelniej i

1:14po zapisaniu faktycznie mamy 3 kolumny po

1:18300 pikseli analogicznie możemy tworzyć też

1:22rozmiary dla wierszy po angielsku wiersz jest

1:26to row czyli jeśli wpiszemy grid-template-rows

1:30i wpiszemy powiedzmy 200 pikseli to

1:34pierwszy z tych wierszy będzie miał szerokość 200 pikseli

1:38jeśli chcemy dodać kolejne no to analogicznie tak samo jak w grid template columns dodajemy

1:43kolejne wartości czyli możemy ustawić sobie 100 pikseli no i powiedzmy

1:47150 pikseli natomiast

1:54w tym momencie musimy zadeklarować tyle ile chcemy

1:58wierszy tyle razy musimy napisać tą wartość co nie

2:02jest idealne ponieważ jeśli ustawimy tutaj powiedzmy 300 pikseli i

2:06300 pikseli tą ten rozmiar wiersza usuniemy to

2:11zauważ że dwie w tym momencie z czterech wierszy

2:16mają ustaloną wysokość a pozostałe już nie dzieje

2:20się tak ponieważ my korzystając z grid-template-columns tworzymy tory jawne

2:25czyli explicit tracks możemy to też podejrzeć z

2:29poziomu devtools firefox tutaj jak się dobrze przyjrzycie

2:33linia typu solid definiuje nam które z torów są

2:37torami jawnymi torami explicit a które z nich są torami

2:42niejawnymi i w tym momencie tutaj gdzie mamy końcówkę tej

2:47twardej linii kończy się nasz jawny tor nasza jawna

2:51siatka więc jak zdefiniować rozmiary

2:55torów rozmiary tracków dla siatki niejawnej służy do tego

3:00polecenie grid auto i tutaj w

3:05zależności od potrzeb możemy dać albo columns albo rows ponieważ możemy

3:09chcieć aby nasz grid rozciągał się domyślnie na

3:13kolumny a nie na wiersze natomiast w naszym przypadku jest to rozciąganie

3:17się na rows czyli im więcej mamy treści tym więcej będziemy mieli

3:21wierszy i dla grid auto rows musimy podać

3:25tak samo wartość w pikselach jeśli damy tutaj powiedzmy

3:3075 pikseli to faktycznie te

3:34niejawne tory dostaną taką szerokość jeżeli teraz usuniemy ten

3:38jawny tor to wszystkie trzy niejawne wiersze

3:43będą miały wysokość 75 pikseli co ciekawe dla grid auto rows

3:48też możemy podawać różne wartości czyli jeśli wpiszemy

3:52tutaj 150 pikseli i odświeżymy to

3:57w tym momencie siatka wygląda tak mamy 3 kolumny po 300 pikseli

4:01oraz jeden wiersz o

4:06jawnie zadeklarowanej wysokości jest to 300 pikseli a

4:10pozostałe są to już nie jawne tory pierwszy z nich ma taką wysokość drugi

4:14z nich ma taką i tutaj ponownie wraca do tej pierwszej wartości

4:18czyli możemy tak naprawdę zapętlać nasze elementy jeżeli zmniejszymy ilość kolumn powiedzmy

4:26albo nawet zwiększmy ją zwiększymy na

4:30150 pikseli 150 pikseli to

4:38widzimy że ten layout tak naprawdę nam się nie psuje tutaj oczywiście kolorowanie wygląda

4:42trochę dziwnie ponieważ mamy ustawione kolorowanie na co drugi element by

4:47był zielony i mamy parzystą liczbę kolumn dlatego to wygląda w ten sposób

4:51natomiast składniowo nic się nie psuje jeżeli nie mamy nadmiarowych

4:55elementów to po prostu nie są one renderowane więc tak

4:59wygląda ustalanie rozmiarów wierszy i kolumn tor

5:05jest to pojedyncza tak naprawdę linia w siatce css grid

5:09czyli to jest jeden tor to jest jeden tor czyli element w którym możemy

5:13wyświetlać treść i my tworząc rozmiary

5:18kolumn czy rozmiary wierszy poprzez grid-template-rows i

5:22grid-template-columns ustalamy siatkę jawną czyli

5:26siatkę explicit wszystko to co nie zostanie zadeklarowane przez

5:31te dwie właściwości zostanie potraktowane tak jak zadeklarowaliśmy to

5:35poprzez grid-auto-rows bądź grid-auto-columns w

5:40kolejnej lekcji dowiesz się jak ustalać rozmiary dla pojedynczych torów