CSS Grid: Funkcja minmax

0:00Cześć w poprzedniej lekcji z kursu css grid zaawansowane layouty dowiedzieliśmy

0:04się o słowach kluczowych auto-fit i auto-fill pozwalają one nam na deklarowanie

0:10takiej ilości kolumn czy wierszy jaka jest

0:14potrzebna a nie ustawianie na sztywno liczby

0:18na przykład 5 aby mieć 5 kolumn analogiczną technikę

0:22możemy zaaplikować w css gridzie jeśli nie chcemy ustalać jakiejś

0:27konkretnej szerokości tylko powiedzmy przedział i

0:31do tego właśnie służy funkcja minmax minmax nazwa stąd

0:35ponieważ możemy podać minimalną i maksymalną szerokość

0:40dla danej kolumny czy konkretnego toru podając jako

0:44pierwszy argument minimalną szerokość i jako drugi argument maksymalną

0:48szerokość czyli jeśli ustawimy sobie minmax 0 do

0:52100 pikseli to nasza siatka

0:57wygląda w tym momencie tak ponieważ mamy 5 kolumn

1:01każda z nich może mieć maksymalnie 100 pikseli no i jak

1:05będziemy zmniejszać ich rozmiar to te kolumny będą się

1:09węzić w przypadku gdy daliśmy auto-fit

1:13na naszą siatkę na nasz kontener te

1:17elementy się zawijały a teraz mamy tutaj takiego z flexboxa

1:21czyli jeśli nie ma już miejsca elementy mogą się skurczyć

1:26to takiej wartości jaką podaliśmy w pierwszym argumencie czyli

1:30w tym momencie jest o 0 moglibyśmy to zwiększyć i na przykład ustalić że 50

1:34pikseli jest to nasza minimalna szerokość i teraz te elementy

1:38będą się zwężały tylko do 50 pikseli no

1:43i w tym momencie widzimy że mamy już overflow kontener nie

1:47mieści się w viewporcie więc mamy tutaj scroll horyzontalny i

1:51jeśli chcielibyśmy aby elementy zawijały

1:56się w momencie kiedy następuje ten moment że faktycznie treść musi

2:00się już przewijać no to możemy zastosować słowo

2:04kluczowe auto-fill czy auto-fit w zależności od potrzeby jeśli

2:09to zrobimy to faktycznie dopóki jest miejsce to

2:14kolumny będą miały te zadeklarowane

2:19100 pikseli im będziemy bardziej zmniejszać nasz viewport tym będzie więcej

2:23wierszy no i jeśli zmniejszymy tutaj powiedzmy

2:27minimalną szerokość z powrotem na 0 to

2:31w momencie kiedy tutaj nam się jeszcze mieściła jedna kolumna ale jeszcze

2:36troszkę to zmniejszymy i widać że faktycznie ta kolumna się jeszcze zwęża

2:40czyli jeśli ustalilibyśmy że wartość

2:45graniczna ta większa będzie miała

2:49większą wartość powiedzmy 200 pikseli to w tym momencie o wiele szybciej

2:53widać że nasz layout jest responsywny tak naprawdę

2:57w jednej linijce kodu css ustalamy tylko i wyłącznie grid-template-columns

3:02powtarzamy funkcją repeat tyle

3:06kolumn ile się zmieści zakładając że kolumny

3:11mają do 200 pikseli no i mogą się kurczyć do zera poprzednio

3:16gdybyśm nie korzystali z css grid musielibyśmy stworzyć

3:20osobne media queries które będą nam zwijały tą

3:24treść na konkretnych break pointach tutaj zauważ że nie ma ani

3:28jednej deklaracji viewportu ta reguła css

3:32nie wie nic o viewporcie wszystko jest resolve'owane

3:36przez silnik przez algorytmy css

3:41grid więc można dojść do wniosku że pracując

3:45z gridem będziesz pisał o wiele mniej media queries związanych

3:50z samym rozkładaniem elementów no bo jeśli oczywiście chcemy zmienić

3:54kolor danego elementu no to dalej musimy napisać media queries do tego ale

3:58jeśli chodzi o samo tworzenie layoutu a nie warstwę

4:03wizualną taką jak kolory czy rozmiary czcionek css

4:07grid bardzo upraszcza tego typu rzeczy i

4:12jeśli będziesz mógł korzystać z css grid na przykład w swojej

4:16pierwszej pracy okaże się że możesz pisać o wiele mniej media

4:20queries niż gdybyś korzystał z flexboxa podsumowując

4:25funkcja minmax przyjmuje jako pierwszy argument minimalną szerokość

4:30jaką dany element w kolumnie w tym przypadku bo ustawiamy

4:34to na grid-template-columns może otrzymać konkretny grid item ta

4:38funkcja nie będzie działała poza css gridem oraz maksymalną jego

4:42szerokość jako drugi parametr w połączeniu ze słowem kluczowym

4:46auto-fill w funkcji repeat możesz

4:51stworzyć responsywny layout w jednej linijce kodu css gdy

4:56przejdziemy do kodowania praktycznych przykładów i będziemy kodowali na przykład

5:00layout trello czy przykładowych

5:04aplikacji zobaczysz że nasz kod będzie o wiele czystszy

5:09i krótszy niż gdybyśmy korzystali na przykład css

5:13flexbox w kolejnej lekcji opowiem ci o dwóch

5:17nowych słowach kluczowych oraz funkcji fit-content która też może

5:21się przydać w takich przypadkach