CSS Grid: Odwracanie kolejności renderowania

0:00Cześć w tej lekcji kursu css grid zaawansowane layouty

0:04opowiem o różnicach między gridem a flexem w kontekście

0:08odwracania kolejności renderowania i

0:13ustalenia kierunku renderowania mamy stworzone dwa kontenery z

0:17dokładnie taką samą ilością elementów są to divy

0:22o klasie item każdy z kontenerów ma dokładnie tyle

0:26samo elementów już widzimy że na pierwszy rzut oka grid domyślnie

0:30zupełnie inaczej renderuje elementy niż flex można

0:35powiedzieć że grid domyślnie renderuje elementy tak jak

0:39flex-direction column mamy

0:43prawie albo niemalże taki sam układ

0:47w tych dwóch kontenerach w tym momencie więc

0:52to jest pierwsza z różnic domyślnie oba tryby

0:56wyświetlania inaczej traktują swoją

1:00treść wróćmy do sytuacji gdzie flex był na jednej linii i

1:04spróbujemy stworzyć kontener który będzie zachowywał się w tym momencie

1:08tak jak flex możemy ustawić grid-auto-flow

1:15na column i

1:20w tym momencie dodać

1:42deklarację grid-template-columns na

1:48repeat auto-fit no i powiedzmy

1:52albo po prostu 10 razy auto

1:57to będzie prostsze nie wiem czemu się to nam nie wyświetla

2:01zróbmy szybkie debugowanie model

2:09pudełkowy nie jest używany okej tutaj nie mamy włączonego grida dobra możemy

2:17zminimalizować teraz tą właściwość i faktycznie widzimy

2:21że elementy są wyświetlane w jednej linii natomiast

2:25flex domyślnie zwęża te elementy do treści moglibyśmy

2:30osiągnąć ten sam efekt albo ustawiając flex-grow na każdym elemencie

2:34flexa albo ustawić na każdej z kolumn wartość

2:38min-content spróbujemy to zrobić grid-template-columns repeat

2:4210 razy min-content zapiszemy

2:47no i mamy generalnie taką samą sytuację możemy dostosować

2:52grida żeby działał mniej więcej jak flex i flexa żeby działał mniej

2:56więcej jak grid natomiast są te rozbieżności między tymi dwoma technologiami których

3:01nie da się pokryć o nich będziemy mówili później ale w kontekście odwracania

3:06kolejności renderowania możemy ustawić flex-direction na

3:12row reverse jeśli korzystamy z flexboxa

3:16i wtedy faktycznie elementy będą renderowane od drugiej strony oczywiście

3:20możemy je dociągnąć do końca linii jeśli chcemy przy pomocy flex przepraszam

3:26justify content flex end i

3:31teraz mamy odwróconą kolejność w grodzie jako

3:35takim nie ma możliwości zastosowania suffixu reverse i

3:39generalnie nie ma możliwości odwracania renderowania treści w ten sposób

3:44da się to zrobić za pomocą innej właściwości css natomiast

3:48nie jest ona przeznaczona stricte do grida tylko do lokalizacji

3:52tekstu to znaczy możemy użyć direction i

3:57tutaj wstawić albo right to left czyli rtl albo

4:01left to czyli ltr no jeśli wpiszemy rtl

4:06to tekst będzie renderowany od prawej strony w lewo i

4:11faktycznie mamy bardzo podobną sytuację do tego którą mieliśmy we flexboxie

4:15możemy teraz dać justify content

4:19na end i

4:24faktycznie mamy dokładnie taką samą sytuację z tym że

4:28używanie direction right to left będzie wiązało się z różnymi

4:32problemami po pierwsze w kontakcie dostępności a po drugie

4:36wszystkie elementy które będziemy teraz zagnieżdżać w

4:40naszych elementach listy również będą miały to direction right

4:44to left więc jeśli chcielibyśmy odwrócić kolejność

4:48renderowania w gridzie w sposób bezpieczny powinniśmy na

4:52wszystkich pozostałych elementach czyli na grid direct

4:57ascendent ustawić direction

5:01left to right w tym momencie nie widać

5:05różnicy natomiast gdyby nasze elementy miały w sobie dzieci to

5:09dopiero teraz mielibyśmy taką samą sytuację generalnie

5:13nie powinniście używać direction do odwracania kierunku

5:17renderowania jeśli korzystacie z grida jeśli macie faktycznie potrzebę odwrócenia

5:22renderowania jest to bardzo mocny znak że

5:26powinniście w tym przypadku użyć flexboxa albo dodać dodatkowy wrapper

5:30który będzie korzystał z flexboxa albo użyć javascriptu używanie

5:35direction w celu odwrócenia renderowania elementów

5:39siatki jest techniką według mnie niepolecaną

5:43i raczej nie spotkacie się w codziennej pracy w takim zapisem więc

5:48owszem da się to zrobić natomiast lepiej jest dla tych sytuacji korzystać

5:52z flexa bo natywnie w gridzie nie

5:56da się odwrócić kolejności renderowania przez suffix reverse czy przez inne słowo

6:00kluczowe direction jest inną właściwością która służy do innych rzeczy co

6:05prawda można ją nadużyć żeby faktycznie

6:10grid działał w podobny sposób ale ja tego nie polecam to

6:14tyle w tej garstce różnic dotyczących grida i flexa do zobaczenia

6:18w kolejnej lekcji