CSS Grid: Kolejność wyświetlania

0:00Cześć w tej krótkiej lekcji z kursu

0:04css grid zaawansowane layouty opowiem ci o tym jak zmieniać kolejność

0:08wyświetlania danych elementów w siatce css grid tak

0:13jak we flexboxie mamy do dyspozycji właściwość order czyli

0:17na dowolnym elemencie powiedzmy elemencie 8 możemy

0:23ustawić order i order przyjmuje wartości numeryczne

0:27gdzie domyślną wartością jest 0 czyli jeśli zrobimy order

0:310 to tak naprawdę nic się w naszym layout'cie nie zmieniło mamy

0:35tutaj jeden dwa trzy cztery pięć to jest pierwszy wiersz no i 6 7 8 9 10

0:39to jest drugi wiersz 5 kolumn w naszej siatce natomiast

0:44jeśli zmienimy wartość order na dowolnym

0:49grid item to tak samo jak we flex itemach element zmieni

0:54swoje położenie tak jakby zmienił się w markupie czyli jeśli zrobimy order minus

0:581 to element ten będzie miał mniejszy indeks

1:02niż pozostałe w związku z czym zostanie przesunięty

1:06na sam początek i tak też się stało jeśli ustalilibyśmy

1:11wartość 1 to element zostanie dodany na

1:15koniec całego grida czyli nie myślimy tutaj nawet o torach

1:19czy kolumnach czy wierszach po prostu tak jakbyśmy zmienili kolejność

1:23tych elementów w markupie możemy również oczywiście dawać większe wartości

1:28takie jak jeśli za deklarujemy na itemie numer

1:32powiedzmy trzy order 2

1:36to jak to będzie wyglądało jako wszystkie z nich mają order

1:400 więc one będą pierwsze następnie będzie element

1:458 następnie element trzeci sprawdźmy to i zgadza się wszystkie

1:49elementy są ułożone w swojej domyślnej kolejności

1:54oprócz tych dwóch na którym dodaliśmy niestandardowy order czyli

1:58inny niż zero no i oczywiście jeśli będziemy dalej iść w tym tokiem

2:02rozumowania zmienimy dziesiątkę na order minus 1

2:06to dziesiątka będzie pierwsza następne będą wszystkie z

2:10orderem 0 czyli wszystko no i 8 i 3 na końcu

2:14generalnie mało będzie sytuacji kiedy będziecie potrzebowali

2:18konkretnie ustawiać order na elementach wewnątrz siatki

2:23css grid ponieważ możecie to samo zrobić przy pomocy

2:27grid-column czy grid-row i będzie to o

2:31wiele bardziej kontrolowane będziecie mieć większą kontrolę nad tym gdzie

2:35dany element się znajduje natomiast jeśli spotkacie się z sytuacją że order

2:39będzie wam potrzebny tak jak to byłoby w flexboxie no to możecie z tej

2:43właściwości skorzystać tylko musicie pamiętać że zmieniając order

2:47będziecie wpływali na to jak przeprowadzana będzie na przykład nawigacja

2:52klawiaturą bądź jak elementy będą czytane przez czytniki

2:56ekranowe może to doprowadzić do tak zwanego rozstrzelenia między

3:01markupem a prezentacją elementów w warstwie wizualnej mówiłem

3:05o tym więcej w kursie css flexbox od podstaw więc jeśli zależy

3:09wam na accessibility i ich chcecie tworzyć layouty dostosowane

3:14również do użytkowników czytników ekranowych czy po prostu użytkowników klawiatury

3:18moja rada unikajcie order starajcie się korzystać z grida w taki

3:22sposób aby podążał on za flow content czyli za

3:26naturalnym biegiem strony tak jak jest zakodowane to w markupie to

3:31wszystko w tej lekcji do zobaczenia w następnej