CSS: Podział na kolumny i wiersze

0:00Część tej lekcji opowiem ci troszkę więcej o kolumnach i wierszach w kontekście CSS

0:05Billa no i generalnie o takich pochodnych właściwościach które są bardzo potrzebne

0:10żeby pracować z gradem i są tak naprawdę podstawami pracy w tej technologii.

0:17Wspomniałem poprzednio że w CSS gdy mamy do dyspozycji funkcję Rapid

0:23funkcja Rapid przyjmuje jako pierwszy argument liczbę kolumn czy wierszy czy po

0:27prostu ilość powtórzeń argumentu numer dwa.

0:32I to jest bardzo wygodne no bo nie musimy tak dużo pisać.

0:35Natomiast czasami nie znamy tak naprawdę drugiej wartości.

0:38Pierwszą wartość znamy ponieważ widzimy to

0:41nie wiemy ile na danej szerokości ekranu powinno być wierszy czy kolumn.

0:47Natomiast ta szerokość jest często na tyle

0:49dynamiczna że nie możemy po prostu jej wpisać na sztywno.

0:52No bo jeśli wpisujemy powiedzmy tutaj 10 remisów.

0:56No to będziemy mieli tutaj niestety króla i to na tej rozdzielczości i po prostu nie

1:00będzie wyglądało tak jakbyśmy tego chcieli.

1:03Możemy to zrobić przy pomocy gry na kilka sposobów.

1:08Po pierwsze mamy dodatkowe funkcje takie jak min max

1:12które to przyjmuje wartość z przedziału A i B czyli jeśli sobie wpisujemy 100

1:16pikseli i 1 F.E.A.R. Unit o którym za chwilkę powiem no to to

1:20będzie ta wartość która się tutaj nam zaopiekuje no ale mamy też możliwość

1:26wpisania zamiast stałej liczby na przykład wartości takie jak auto Fit

1:32czy auto Phil i wtedy CSS widz sam będzie nam dostosował ile ma

1:37być tych wierszy czy kolumn w zależności od rozmiaru naszych elementów.

1:41To o czym chciałem wspomnieć w tej konkretnej lekcji to oczywiście.

1:46Jak możemy zadeklarować jawnie.

1:51że chcemy mieć powiedzmy sześć kolumn ale

1:54chcemy żeby one się nam rozciągają na szerokość taką jaka jest dostępna.

1:58No to już tutaj pokazałem to przy okazji prezentowania funkcji mi max.

2:03że w CSS gdzie mamy jednostkę.

2:07F.E.A.R. to specjalna jednostka dla CSS

2:09vide ACE CSS Flex Box nie miał takiej jednostki tam po prostu pracowaliśmy na

2:14Flex groove i Flex String Faction Unit działa na takiej samej zasadzie co Flex

2:20grą dysponuje dostępną przestrzeń pomiędzy elementy.

2:25Czyli jeśli ustawiamy tutaj powtórzeń 6 na

2:281 Faction unit to faktycznie te elementy będą nam się osiągały tak bardzo jak

2:33pozwala na to szerokość tego konkretnego kontenera.

2:36Czyli jeśli ustawiamy tutaj Belgrad na

2:38szarym to nie ma żadnej wolnej przestrzeni natomiast jeśli

2:43byśmy tę wartość powiedzmy do 50 pikseli oczywiście to będzie wyglądało źle no to

2:47widzimy że ta przestrzeń jest dostępna więc 1 frakcję Unity

2:51dysponuje dostępną przestrzenią na wszystkie elementy tak samo jak

2:55CSS Flex Box robi to w przypadku Flex grą o funkcjach takich jak min max czy słowach

3:02kluczowych jak auto film i auto Fit mówię w osobnym kursie

3:06o czym warto pamiętać teraz to to że mamy

3:09do dyspozycji słowa kluczowe takie jak Green Temple Trophy i Great Temple.

3:16I one obie przyjmują albo wartość z PITa albo możemy na sztywno

3:21wpisać ręcznie czyli tutaj 10 rozmów i GRID auto roz ustawić na powiedzmy

3:2915 frejmów jeśli chcemy aby nasz pierwszy wiersz miał 10 remisów wysokości.

3:36Kolejne automatyczne miały po 15 i to samo możemy tak naprawdę powtórzyć dla.

3:42Great Templeton kolumn.

3:48Z tym że wtedy.

3:50Musimy zmienić GRID auto flow na.

3:54Rok bądź kolumny w zależności od tego.

3:57Której wartości w tym momencie potrzebujemy.

4:00CSS grill działa bardzo dobrze z CSS

4:03Custom Properties przede wszystkim dlatego że ma prawie identyczne wsparcie jeżeli

4:08chodzi o przeglądarki jeżeli mamy wsparcie CSS GRID to jest bardzo

4:13prawdopodobne że mamy wsparcie dla CSS Custom Properties

4:17i można na przykład te wartości do ilości kolumn w danej rozdzielczości przypisać do

4:23CSS Custom Properties i zmieniać je dynamicznie na odpowiednich piętach.

4:28W sposób jawny i wymowny.

4:30O tym też będę mówił w osobnym dziale o CSS Custom Properties.

4:34Natomiast to co tutaj warto zapamiętać jest to że CSS GRID

4:38działa inaczej od Fleet Box a w kontekście tego że tutaj leje out czyli to co my

4:43tutaj deklarujemy poprzez ustawienie ilości kolumn czy wierszy

4:48dyktuje nam jak nasza strona będzie się denerwowała gdzie w przypadku Xboksa my

4:52tak naprawdę tego nie kontrolujemy tylko ta sama treść się układa automatycznie w

4:57zależności od tego jakie wartości tam podamy.

5:00No i oczywiście w CSS Xboksie mieliśmy do

5:03dyspozycji wartości takie jak content czy Elite content Line.

5:09CSS idzie też te elementy mamy do

5:11dyspozycji więc jeśli tutaj zrobimy ponownie dwa rymy napiszemy.

5:18No to widzimy że nasz Kontener ma teraz dużo przestrzeni i możemy tę przestrzeń

5:23zagospodarować tak samo jak gospodarować nią w.

5:27CSS Flex Boxer

5:28czyli tutaj jeśli sobie ustalimy może chwyt na auto bo tutaj też ten nasz

5:33Kontener ma gdzieś planowaną sztywną wartość.

5:36No to możemy zrobić fajne kontent

5:40ustawić na Center i wszystkie te elementy tak samo jak flex boksie będą.

5:45Możemy zrobić tak samo.

5:47Start już tutaj nie Flex start ponieważ

5:50tak naprawdę nie pracujemy z Alexem ale efekt działania jest identyczny.

5:56Czy na przykład Space Round Space Vivendi te wszystkie wartości które znacie z CSS

6:01Xboksa na pewno przydadzą się w zrozumieniu gnida.

6:05No i tak jak wspomniałem już wcześniej nagrodzie mamy dostęp do wartości GAP

6:11która to ustawi nam odstępy pomiędzy elementami.

6:17Na takie jakie zadeklarowali oczywiście pięć frejmów to bardzo dużo.

6:22W związku z czym Pure ma na przykład pozwoli nam.

6:26Stworzyć leja w którym tak naprawdę jest dosyć podobny do Xboxa.

6:31Gdzie elementy rozszerzają się tak bardzo jak mogą z zachowaniem tego Grupa

6:37RMF pomiędzy elementami z każdej strony ale nie dodając ich od zewnątrz.

6:42Czyli jeśli damy sobie parking to oczywiście to też się nam skurczy.

6:46Ta dostępna przestrzeń.

6:49Ale to samo w sobie nie jest jeszcze klub

6:53mocy CSS grilla ponieważ to że mamy zadeklarowany leja aut

6:58nie oznacza jeszcze że wiemy jak te elementy na tym tle Jałcie ustawiać.

7:04Tak naprawdę obecna sytuacja mogłaby być w stu procentach zastąpiona przez flag Xboxa

7:09i miałaby lepsze wsparcie przeglądarek w związku z czym jeżeli chcemy wykorzystać

7:13gnida na przykład do tego aby ósemka zajmowała kilka wierszy czy kilka kolumn

7:19no to musimy nauczyć się ustawiać elementy na siatce którą właśnie zdefiniował.

7:25I o tym będzie następna lekcja.