CSS Grid: Słowa kluczowe i funkcje

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

0:05wszystkie słowa kluczowe oraz funkcje które dostajemy dzięki

0:09temu że nasza przeglądarka wspiera grida i piszemy w css gridzie

0:13dwa pierwsze słowa kluczowe to min-content i max-content

0:17zasada ich działanie jest taka że ustawiając grid-template-columns

0:22powiedzmy na przy pomocy funkcji

0:26już repeat użyjemy powiedzmy trzy kolumny min-content

0:32zapiszemy to widzimy że każdy

0:36element zajmuje tylko tyle miejsca ile ma treści to jest minimalna

0:41szerokość jaką ta treść może posiadać w

0:45drugim przypadku jeśli wpiszemy tutaj więcej tekstu zapiszemy

0:51to przy min-content kolumna ma

0:55dalej tą samą szerokość elementy są dodawane poniżej no

0:59i oczywiście rośnie jej też wysokość natomiast jeśli zmienimy to na max-content to

1:04elementy będą układane w jednej linii tak jakby zajmując

1:09całą dostępną przestrzeń którą treść mogłaby zająć dlatego

1:13max-content oczywiście mamy też fit-content jest

1:17tak jakby trochę max-content natomiast mamy

1:21tutaj argument którym możemy wyznaczyć jaki

1:25jest maksymalny rozmiar danego elementu którego nie chcemy przekraczać

1:30w przypadku auto-fit i auto-fill nie

1:34musimy deklarować rozmiaru nie musimy deklarować ilości

1:38kolumn możemy wpisać auto-fit i

1:43wstawić tutaj informację że chcemy ileś kolumn

1:47o szerokości 150 pikseli nie wiemy ile niech

1:51grid to sam nam rozwiąże zapisujemy no

1:55i faktycznie jak teraz będziemy rozszerzać czyli zwężać bądź

1:59powiększać viewport przeglądarki no

2:04to będziemy mieli sytuację podobną jak we flexie gdy

2:08ustawimy flex-wrap na wrap auto-fit od auto-fila różni się tylko

2:12i wyłącznie tym że auto-fill w przypadku gdy mamy mniej

2:16kolumn niż niż to potrzebne mniej

2:20elementów do wyświetlenia aby wypełnić kolumny jeśli zapiszemy tą sytuację

2:25to możemy podejrzeć w inspektorze www jak wygląda nasza siatka

2:29no i przy auto-filu faktycznie widzimy że te kolumny są

2:33stworzone przy auto-ficie po zapisaniu widzimy

2:38że tych kolumn nie ma one są jakby nałożone w jednym miejscu na siebie no

2:42i to daje nam możliwość ustalania pozycji naszej

2:46treści wewnątrz grida jeżeli damy tutaj center to te elementy wycentrują

2:50nam się wewnątrz siatki jeżeli ustawimy background na niebieski

2:55to faktycznie widzimy że jest to środek siatki

2:59przy auto-fillu to nie zadziała ponieważ mamy inną liczbę kolumn jest

3:04też oczywiście słowo kluczowe auto które pozwoli po prostu na dopasowanie

3:09rozmiaru kolumn w zależności od treści i to rozmiary

3:13tych elementów są już determinowane przez algorytmy css grid

3:18może dodamy z powrotem tutaj te elementy użyjemy

3:22emmet czyli stworzymy diva o klasie item każda

3:27z nich będzie miała też klasę item

3:31o swoim numerze no i w treści wstawimy numer danego elementu no

3:36i pomnożymy to razy 20 to jest emmet teraz możemy tabem wypełnić

3:40nasz edytor takim oto markupem bardzo przydatna rzecz emmet

3:44polecam o funkcji repeat już wspomnieliśmy natomiast

3:49jeszcze raz repeat pozwala nam powtórzyć cokolwiek

3:53wpiszemy w drugi parametr tyle razy ile podamy to w pierwszym

3:57parametrze czyli jeśli wpiszemy tutaj 5 razy 100 pikseli no

4:01to stworzy nam się 5 kolumn o szerokości 100 pikseli

4:06możemy też oczywiście użyć funkcji minmax która pozwoli nam

4:10zadeklarować przedział rozdzielczości

4:14które dane kolumny czy wiersze mogą zajmować czyli jeśli wpiszemy

4:18minmax i damy tutaj zero do powiedzmy 1fr

4:24no to będziemy mieli faktycznie elementy które są tak

4:28szerokie jak tylko możliwe będą równo dystrybuowały przestrzeń między sobą no

4:33i tak jak będziemy je zmniejszać to będą się zmniejszały aż do zera

4:37bo zero zadeklarowaliśmy jako naszą wartość graniczną więc

4:41to są najważniejsze właściwości i funkcje które dochodzą nam

4:45w momencie jeśli używamy grida większość

4:49z nich nie działa poza gridem bądź działa w inny sposób dlatego korzystajcie

4:54z nich tylko i wyłącznie wtedy kiedy wasz layout faktycznie opiera się na siatce css

4:58grid w kolejnej lekcji omówimy pokrótce wszystkie możliwe

5:03właściwości czyli to konkretnie to co możemy ustawić

5:07na gridzie żeby zmienić jego sposób renderowania włączając

5:11w to różne short hendy czyli notacje skrócone