CSS Grid: Dopasowywanie do treści

0:00Cześć w tej lekcji z kursu opowiem ci o dwóch słowach kluczowych jakimi

0:04są min-content i max-content oraz o funkcji fit-content do

0:09czego one służą są to generalnie wartości które możemy wykorzystać przy tworzeniu

0:13wierszy i kolumn możemy na przykład zamiast wartości

0:181fr podać wartość max-content i

0:22w tym momencie nasz grid zwęży się do pięciu kolumn renderując

0:27je w taki sposób aby zajmować tyle miejsca ile

0:32maksymalna każda z kolumn może zajmować to znaczy jeśli

0:36tutaj spiszemy więcej tekstu to faktycznie

0:41ten grid się rozciągnie i nieważne czy damy tutaj spację

0:45czy tutaj będą nowe linie nie ma to znaczenia ponieważ cała

0:49treść którą tutaj dodamy będzie respektowana jako maksymalna

0:54szerokość tej kolumny jest to dosyć podobne do tego jak wstawiliśmy

0:58zamiast szerokości kolumny wartość auto

1:03natomiast max-content zawsze bierze maksymalną

1:08szerokość jaką treść zajmowałaby w tej danej

1:12kolumnie to znaczy jeśli zmienimy wartość z

1:16max-content na min-content to zauważ

1:21że ten tekst zawinął się tak biorąc

1:25pod uwagę najbardziej nierozdzielalny tekst to znaczy tam

1:29gdzie nie było spacji i gdzie zostało znalezione najdłuższe słowo max-content

1:34wziął swoją wartość jako szerokość tego słowa niekoniecznie

1:39znaków ascii tylko faktycznie szerokość każdej z liter

1:43pomnożoną razy font-size i tak dalej i tak dalej razy letter-spacing

1:47to wszystko jest brane tutaj pod uwagę i max-content przyjmuje

1:53wartość taką jak gdybyśmy ustawili white-space nowrap czyli

1:58bez zawijania tekstu w danej linii a min-content z drugiej

2:03strony zupełnie na odwrót czyli zawija nam tekst i patrzy

2:07gdzie jest jego maksymalna szerokość i aplikuje

2:11to do rozmiaru kolumny czyli jeśli ustawilibyśmy tutaj z powrotem 1fr

2:16i tutaj wstawili jedną kolumnę o szerokości

2:21max-content to widzimy że kolumny

2:25zostały utworzone zajęły tyle miejsca ile potrzebowały jest to troszkę za

2:29duży grid więc możemy go troszkę zmienić i pierwsza kolumna ma dokładnie taką

2:33szerokość jeśli damy tutaj min-content będzie po prostu tak

2:38wąska jak się da jeśli damy max-content będzie tak szeroka jak

2:42się da w zależności od treści no i podobną sytuację możemy obsłużyć

2:46za pomocą funkcji fit-content która działa

2:50praktycznie jak jedno słowo kluczowe

2:54i drugie jak max-content i min-content tylko że możemy programatycznie

2:59przekazać argument który określi jakie

3:03jest maksimum które dana treść może zająć czyli jeśli wpiszemy fit-content

3:07i damy tutaj 1fr to zajmie nam

3:11całą dostępną przestrzeń natomiast jeśli tutaj wpiszemy 100

3:16pikseli i 100 pikseli jest to mniej niż długość

3:20tego ciągu znaków no to brana jest większa

3:24wartość natomiast jeśli ustalimy że

3:28ma być to powiedzmy 150 pikseli no

3:33tutaj musimy już troszkę zgadywać bo nie wiem jak

3:37duży jest ten element zobaczmy to jest 346

3:41pikseli czyli jeśli ustawimy tutaj powiedzmy 300 no

3:46400 pikseli to już ponad to 400

3:50pikseli nasza treść nie wejdzie więc można by powiedzieć

3:54że fit content to jest najlepsze z obu poprzednich rozwiązań ponieważ

3:59możemy tak czy siak respektować minimalną szerokość danej

4:03treści jako wartość naszej kolumny rozmiaru

4:07naszej kolumny jednocześnie dając wartość graniczną że

4:12nie większą niż te 400 pikseli oczywiście będą

4:16sytuacje w których silnik css nie będzie wiedział jak rozwiązać

4:21niektóre skomplikowane obliczenia tak jak na przykład gdybyśmy zrobili

4:25tutaj do funkcji

4:29repeat podali auto-fit i

4:331fr no to w tym momencie grid

4:37nie jest w stanie określić jaka to będzie wartość ponieważ

4:42jeden fractional unit jest to dostępna przestrzeń i nie deklarujemy

4:46tutaj żadnego podziału daliśmy tutaj tak jakby dwie zmienne i

4:50to wygląda tak jak byśmy prosili silnik renderujący w

4:54w css no domyśl się jaki chcemy layout nie

4:58ma tutaj żadnej informacji która deklarowałaby ten layout więc algorytmy

5:03css grid nie są w stanie domyślić się o

5:07co nam chodzi i tak też będzie w sytuacji z fit-content jeśli podamy tam na

5:11przykład fractional unit bądź inne zmienne których css grid nie

5:15będzie w stanie policzyć no to najczęściej takim fallbackiem który wychodzi

5:19w sytuacji gdy css-grid nie może tego rozwiązać jest jedna

5:23kolumna o maksymalnej szerokości podsumowując

5:28mamy do dyspozycji dwa słowa kluczowe max-content i min-content min-content

5:32będzie to minimalna szerokość danej kolumny w

5:36zależności od treści jaka się wewnątrz niej znajduje max-content

5:40będzie to cała treść podobnie jak gdybyśmy ustawili

5:45white-space nowrap na standardowym elemencie html w standardowym

5:49trybie renderowania natomiast fit-content jest to tak

5:54jakby min-content i max-content tylko że możemy przekazać wartość

5:58graniczną podatku ponad którą css grid już nie będzie renderował

6:03powiększał danej kolumny czy wiersza