CSS Grid: Wyrównywanie elementów siatki

0:00Cześć w tym rozdziale css grid zaawansowane layouty opowiem

0:04o różnicach między css flexbox a css grid oraz

0:09podobieństwach czyli zaczniemy od podobieństw które

0:13grid ma do flexa żeby później przejść do różnic

0:17i generalnego podsumowania tych dwóch technologii zacznijmy

0:22od ustawienia stałej wysokości na naszym gridzie na naszej

0:26siatce powiedzmy na 800 pikseli troszkę się powiększył no

0:30i teraz tak we flexboxie mamy możliwość wyrównywania

0:34elementów wokół danej osi przy pomocy właściwości takich

0:38jak justify we flexboxie mamy możliwość wyrównywania elementów wokół

0:43danej osi przy pomocy właściwości takich jak justify content align content

0:47align items i tak dalej no i te właściwości też są dostępne

0:51w gridzie one się troszkę różnią ale generalnie idea działania

0:56jest bardzo podobna czyli jeśli wpiszemy sobie justify content

1:00end wszystkie elementy wewnątrz grida czyli wewnątrz

1:04tego niebieskiego pola zostaną przeciągnięte do końca danej

1:09linii justify-content i generalnie ten

1:13suffix content działa w osi x to nie jest tak że jak

1:18w przypadku flexboxa w zależności od tego jakie mamy flex

1:22direction to justify content działa w osi pionowej albo poziomej to

1:26działa inaczej w gridzie no i tutaj wpisujemy zamiast flex end

1:30wpisujemy samo end ponieważ to nie jest flex ale ta właściwość też zadziała

1:34w gridzie więc jeśli jesteś przyzwyczajony do korzystania z justify content flex

1:38end no możesz wpisać flex end ale generalnie zaleca się pobieranie

1:43tego żeby nie wprowadzać zakłopotania co to do tego jakiej technologii

1:47w tym momencie używamy no i analogicznie mamy oczywiście start

1:52end mamy center i jeśli chcielibyśmy

1:56wyrównać elementy wokół osi pionowej

2:00no to możemy wykorzystać do tego align content

2:04i również ustawić na center więc w tym momencie wyłączył

2:10nam się domyślny stretch domyślnie elementy są rozciągane w osi pionowej

2:14no i elementy wycentrowaly się w danym kontenerze w

2:18tej siatce no i możemy tutaj również dać end start

2:22i mamy możliwość pozycjonowania tak

2:27jak we flexie przy pomocy space-between space-around czy

2:31space-evenly czyli space-around umieści

2:35nam elementy w taki sposób że dookoła każdej

2:39kolumny w tym momencie będzie dokładnie taka sama przestrzeń czyli z

2:43lewej strony powiedzmy mamy 15 pikseli z prawej strony

2:47pikseli i ta kolumna również ma z

2:51lewej strony 15 i z prawej strony 15 dlatego kolumny

2:56wewnętrzne będą miały większy margines niż te skrajne ponieważ

3:01tutaj będzie to margines podwójny mamy też możliwość ustawienia

3:06space-evenly i w tym momencie każdy z odstępów

3:10ma taką samą szerokość no i mamy też możliwość ustawienia tego

3:14jako space between tak by elementy skrajne

3:19odpychały się do końca krawędzi no a te środkowe dystrybuowały

3:23dostępną przestrzeń na konkretne

3:27przerwy tak jak mieliśmy na przykład grid gap analogicznie

3:32align content może zrobić to samo czyli jeśli zrobimy space between to

3:39elementy będą miały przestrzeń i w osi pionowej i w

3:43osi poziomej space-around wtedy elementy

3:47będą miały dociąganie

3:51w osi poziomej do krawędzi natomiast w osi pionowej będą

3:55miały równą przestrzeń między nimi no i tak dalej i tak dalej więc justify content

4:01i align content w kontekście grida umożliwia

4:05nam pozycjonowanie dzieci tej siatki wewnątrz

4:10kontenera mamy też do dyspozycji oczywiście słowa kluczowe które

4:15będą definiowały jak mają zachowywać się pojedyncze elementy wewnątrz

4:19siatki to znaczy jeśli chcielibyśmy żeby ten element był

4:23dociągnięty do końca danej kolumny możemy napisać justify-items

4:28i napisać end i w tym momencie widzimy że każda z kolumn jest

4:32dociągnięta do prawej strony jeśli zaczniemy start to będzie na początku jeśli zrobimy

4:36center to będzie na środku no i oczywiście jeśli

4:40podświetlimy sobie to w kontenerze to widać że to jest faktycznie środek danej kolumny

4:44danego tracka i analogicznie wykorzystujemy justify przepraszam

4:49align items center no i mamy w tym

4:53momencie w dwóch osiach wycentrowane elementy i tutaj

4:57tak samo możemy umieścić je na końcu na początku a domyślnie są

5:01one po prostu rozciągane przez stretcha takie elementy oczywiście dalej możemy przesuwać

5:05przy pomocy align content więc mamy

5:09możliwość kontrolowania rozmiarów dzieci i położenia

5:13wewnątrz danych tracków jak i pozycji samych tracków i tak jak

5:17we flexboxie mogliśmy kontrolować pojedyncze itemy czyli powiedzmy

5:22że item siódmy będzie miał align

5:26self stretch to widzimy że faktycznie element

5:30siódmy jako jedyny jest rozciągnięty na całą wysokość

5:34danego wiersza i to czego nie ma na przykład zestaw we flexboxie a jest w gridzie

5:38to justify-self justify-self we flexboxie

5:44nie działa natomiast w gridzie możemy też

5:48pojedynczy element rozszerzać bądź kurczyć

5:52bądź zmieniać jego położenie w osi poziomej czyli jesli

5:56wpiszemy tutaj również wstecz aby ustawić to na wartość domyślną no to ten element

6:00zajmuje całą wysokość wiersza i całą szerokość danej kolumny

6:04czyli tu jest kolumna to jest wiersz bierzemy 100% danego obszaru

6:08który jest nam dany tej właściwości nie

6:12ma we flexboxie jest w gridzie i szczerze mówiąc składnia

6:17grida przemawia do mnie bardziej niż ta flexboxowa ponieważ

6:21jest bardziej spójna mamy więcej podobnych do siebie właściwości

6:25nie mamy tutaj szumu informacyjnego przez nadawanie przedrostków

6:30flex po prostu wiemy że chcemy położyć element element na

6:34początku bądź na końcu danego tracka no i jest

6:38to generalnie bardziej spójne jeśli nie czujesz się dobrze z pozycjonowaniem

6:42elementów wzdłuż tracków bądź linii polecam ci zerknięcie

6:47na kurs flexbox od podstaw gdzie dogłębnie tłumaczy jak ten mechanizm

6:52działa bądź wejście na css tricks

6:56do artykułu ultimate guide to css

7:00grid i tam będziesz miał faktycznie rozrysowane bardzo

7:04ładnie jak dane elementy przy jakich właściwościach są

7:08układane wzdłuż tracków