CSS Grid: Automatyczne dopasowywanie i wypełnianie

0:00Hej w tej lekcji css grid zaawansowane layouty opowiem

0:04o automatycznym dostosowywaniu i automatycznym wypełnianiu o co

0:08tutaj chodzi generalnie css grid dostarcza nam kilka

0:13słów kluczowych kilka funkcji niektóre z funkcji już poznaliśmy jak na przykład repeat

0:18a jednym z takich słów kluczowych jest auto-fit i auto-fill

0:22do czego można go wykorzystać no obecnie w

0:26naszych przykładach korzystaliśmy z reguły z konkretnej liczby kolumn

0:30i takim rozmiarze który pozwoli zająć całą

0:34dostępną przestrzeń natomiast czasem faktycznie chcemy aby

0:39nasze elementy miały stałą szerokość i aby mieściło się ich

0:43jak najwięcej na stronie jak jest to możliwe czyli w takim przypadku musielibyśmy

0:47tutaj ustawić na przykład 9 kolumn natomiast na większych ekranach

0:51może byłoby to 12 kolumn i musielibyśmy tworzyć osobne

0:55media queries aby obsłużyć odpowiednią ilość kolumn na odpowiednich

0:59rozdzielczościach no i nie jest to po prostu wygodne

1:04rozwiązanie więc to co możemy zrobić jest nie deklarowanie

1:08ile kolumn ma zostać wygerenowanych tylko

1:12pozostawienie tego samemu silnikowi css-grid jak to zrobić

1:16można wykorzystać właśnie wspomniane słowo kluczowe na przykład auto-fit

1:20i w tym momencie po zapisaniu mamy

1:25tyle elementów na stronie tyle kolumn ile

1:29faktycznie mieści się w naszym viewporcie czyli jeśli zwężymy ekran

1:33to faktycznie im mniejszy ekran tym mniej

1:37elementów na stronie jest wyświetlane jest to bardzo podobne do

1:41silnika który zarządza flexboxem gdzie jeśli

1:45ustawimy faktycznie zawijanie wierszy przez flex-wrap no

1:50to elementy będą zawijane do następnej linii jeśli

1:54nie będą mieściły się już w viewporcie i to dokładnie daje

1:59nam auto-fit i auto-fill natomiast

2:03jaka jest różnica między tymi dwoma słowami kluczowymi no

2:07spróbujemy zaaplikować tutaj auto-fill i zobaczymy różnicę jak

2:12widać nie ma różnicy a to dlatego bo one

2:17różnią się w momencie kiedy jest za mało elementów aby

2:21faktycznie wypełnić dostępny viewport kolumnami

2:26czyli jeśli zmniejszymy ilość naszych elementów powiedzmy do

2:30sześciu zapiszemy wpisujemy

2:34auto-fill tak samo auto-fit

2:38tak samo natomiast jest to złudne ponieważ jeśli sprawdzimy

2:42to w devtoolsach i podświetlimy całą naszą siatkę to

2:46zobaczymy że przy auto-fit mamy stworzone 6

2:50kolumn pierwsza druga trzecia czwarta piąta szósta tutaj

2:54widzimy 10 czyli tak jakby te kolumny są tworzone ale

2:58mają zerową szerokość natomiast w przypadku auto-fill

3:02te kolumny są już jawnie tworzone to może

3:06mieć znaczenie w przypadku kiedy chcielibyśmy ustawiać treść

3:11wewnątrz naszego grida na jego początku końcu tak

3:15jak robiliśmy to we flexboxie służy do tego właściwość

3:20na przykład justify-content end i jak

3:24widzimy w przypadku auto-fill ten element nie przesunął się za bardzo natomiast

3:29auto-fit element wyląduje na końcu faktycznego

3:34kontenera grida czyli przez to że robimy auto-fit wypełniamy

3:38cały kontener kolumnami nawet jeśli są one puste

3:42a przy auto-ficie wypełniamy tylko tyle kolumn ile

3:47jest faktycznie potrzebne i możemy później manipulować położeniem tychże

3:52elementów wewnątrz kontenera za pomocą dodatkowych słów kluczowych więc

3:56auto-fill i auto-fit są to słowa kluczowe które póki co działają tylko

4:00i wyłącznie z gridem zobaczymy gdzie specyfikacja nas poprowadzi ale

4:05są niezwykle przydatne jeśli chcemy kontrolować ilość kolumn

4:10czy wierszy w sposób elastyczny niezależny

4:14od viewportu ponieważ w zależności od tego

4:18jak mamy szeroki ekran bądź wąski te elementy będą nam

4:22się zawijały ale jeśli będziemy mieli nadmiarową

4:26treść to możemy albo te dodatkowe kolumny wyświetlić albo

4:30je ominąć dzięki to wszystko w tej lekcji