CSS Grid: Funkcja repeat

0:00Cześć w poprzednich lekcjach css grid zaawansowane layouty omówiliśmy

0:04jak tworzyć konkretne kolumny jak tworzyć wiersze

0:09konkretnego rozmiaru i generalnie czym tory jak je

0:13pozycjonować czyli ustaliliśmy że każda wartość dla na przykład

0:17grid-template-columns oznacza jedną kolumnę i każde kolejne

0:21kolumny deklarujemy poprzez kolejne wartości oddzielone spacją

0:25czyli jeśli stworzymy sobie powiedzmy 7 kolumn

0:33o szerokości 100 pikseli no to musimy 7 razy napisać

0:37wartość 100 pikseli każdą z nich rozdzielić spacją jest to zdecydowanie

0:41nieoptymalne ponieważ po pierwsze będzie niewygodnie dla nas aktualizować

0:45wszystkie te wartości jeśli chcielibyśmy aby te kolumny miały

0:50teraz szerokość 75 pikseli no to każda z nich musiałaby być ręcznie

0:54aktualizowana na wartość 75 pikseli no

0:59i oczywiście to zajmuje czas a poza tym jest to po prostu nieoptymalne w tym kontekście

1:03że wszystkie te dane będą wysyłane do przeglądarki naszego klienta no

1:08i te dane będzie musiał ściągnąć w związku z czym nasza strona może się renderować

1:12wolniej oczywiście jest to dosyć mikroskala natomiast

1:16tak czy siak natomiast tak czy siak można to zoptymalizować

1:20i możemy to zrobić za pomocą funkcji repeat funkcja repeat

1:24wygląda w ten sposób że jako pierwszy argument podajemy ilość kolumn którą

1:29chcemy zadeklarować czyli powiedzmy w naszym przypadku było to 7 no i drugi argument

1:33jest to rozmiar danej kolumny jeśli to zapiszemy

1:37no to widzimy że mamy 7 kolumn po 100 pikseli i

1:42jeśli chcielibyśmy żeby każda z nich miała teraz szerokość 75 pikseli

1:46wystarczy że zmienimy to w jednym miejscu a silnik

1:50css sam przetłumaczy te wartości na pojedyncze kolumny

1:55oczywiście możemy też korzystać z funkcji repeat w gridzie dla właściwości takich

2:00jak grid-template-rows i możemy wpisać tutaj powiedzmy trzy

2:05po 150 pikseli i jeśli to zapiszemy to

2:09faktycznie widzimy że każdy z nich ma 150 pikseli możemy usunąć zmniejszyć

2:14liczbę tych kolumn powiedzmy na 3 wtedy będziemy mieli więcej wierszy

2:18no i zmienić domyślną szerokość auto rows powiedzmy na

2:22100 pikseli i jak widzimy faktycznie trzy wiersze mają

2:27wysokość 150 pikseli no pozostałe są automatycznie wygenerowane z

2:31wysokością 100 pikseli no i mamy 3 kolumny każda po 75 pikseli

2:35co ciekawe możemy też deklarować kolumny używając

2:40pojedynczych jednostek oraz funkcji repeat czyli jeśli chcielibyśmy aby tutaj

2:45doszła nam jedna kolumna która będzie miała szerokość całą taką

2:49jaka jest dostępna faktycznie w danej siatce no to możemy pod koniec

2:53tej deklaracji napisać 1fr i faktycznie mamy

2:57jedną kolumnę po prawej stronie która zajmuje całą dostępną przestrzeń analogicznie

3:03możemy zadeklarować taką kolumnę po lewej stronie i

3:07teraz mamy dwie równe kolumny w każdym ze skrai

3:11siatki css grid no i 3 równe

3:15kolumny o szerokości 75 pikseli na jej środku

3:19no i oczywiście możemy również powtórzyć użycie

3:23tej funkcji deklarując powiedzmy dwie kolumny o szerokości

3:27200 pikseli no i w tym momencie kolumny

3:32z szerokością 1fr są troszkę krótsze niż faktycznie jawnie deklarowane

3:36kolumny o szerokości 200 pikseli natomiast mamy możliwość

3:40takich kombinacji do każdej właściwości css będziemy z tej

3:44notacji korzystać bardzo dużo w kolejnych lekcjach więc upewnij się

3:48że rozumiesz jak działa funkcja repeat do zobaczenia w kolejnej lekcji