CSS Grid: Tablica Trello na gridzie

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

0:04o tym jak został stworzony layout trello nie jest to oczywiście

0:08oficjalny trello jest to codepen stworzony przez george'a parka

0:13link do codepena znajdziecie później w linkach

0:17i przydatnych źródłach natomiast jest to bardzo ciekawy przypadek do

0:21omówienia po prostu jak można tworzyć layouty na gridzie nawet skomplikowanych

0:25aplikacji generalnie trello jest to tablica która

0:29pozwala wam tworzyć kolumny z jakimiś zadaniami i możecie te zadania przyciągać

0:34z jednej kolumny do drugiej jak to zostało stworzone po

0:38pierwsze george uzył tutaj znacznika support który pozwala

0:42na wykrycie czy display grid w tym przypadku ponieważ

0:46taki podaliśmy argument do dyrektywy supports

0:50jest wspierany w danej przeglądarce no i jeśli tak to aplikujemy taki

0:55oto zbiór reguł do przeglądarki i ona się wyrenderuje

0:59to znaczy że możemy stworzyć fallback dla

1:04strony która nie pracuje faktycznie na gridzie która wspiera powiedzmy flexbox albo

1:09tylko floaty i później dopiero napisać w znaczniku supports wszystkie

1:13reguły i deklaracje które chcemy dostarczać do aktualnych

1:18przeglądarek które nadpiszą wszystko co napisaliśmy wcześniej ponieważ grid

1:22ma priorytet ponad innymi metodami renderowania stron czyli

1:26jest to świetne w kontekście progressive enhancement czyli dostarczania

1:31lepszych feature'ów lepszych właściwości do lepszych urządzeń

1:35gdy starsze urządzenia będą miały może troszkę uboższy

1:39experience doświadczenia związane z odbiorem strony natomiast dalej

1:43ta strona będzie mogła być czytelna zobaczmy więc w narzędziach

1:47firefoxa jak ten layout został stworzony jak

1:52widzimy tutaj mamy znacznik masthead no i to

1:56jest też grid jak tutaj zobaczymy mamy tutaj faktycznie zaznaczone że jest

2:00to element który pozycjonuje się na siatce no i jak go zaznaczymy to

2:05faktycznie widać że posiada on jedną kolumnę auto i tu

2:09są faktycznie te przyciski do wybierania innych tablic

2:13jakaś wyszukiwarka następnie kolumna która

2:17zajmuje całą dostępną przestrzeń poprzez 1fr no i ponownie

2:21kolumna z automatyczną szerokością bazującą na ilości

2:25przycisków i ich rozmiarze no i pomiędzy tymi dwoma kolumnami

2:29mamy jeszcze grid-gap o szerokości 2rem czyli jednostce

2:34relatywnej do route'a naszego dokumentu tego typu znacznik

2:38moglibyśmy oczywiście też zrobić na flexie natomiast w gridzie wystarczy tylko i wyłącznie

2:43grid-template-columns auto 1fr auto no i ustawienie

2:47odpowiedniego column gapa w zależności od naszych potrzeb to co jest ciekawe

2:51i niecodzienne w tym konkretnym przykładzie jest to że

2:55elementy faktycznie są zawijane jako kolumny czyli

2:59tutaj mamy ustawiony grid-auto-flow ustawiony na column czyli

3:03każdy dodatkowy element który nie został zdefiniowany w jawnym gridzie

3:08w jednej siatce będzie dodawany jako kolejna kolumna i właśnie wtedy otrzymujemy

3:12taki oto layout że mamy scrollowalną sekcję column

3:16stworzoną na gridzie jeśli znajdziemy sobie element list container

3:21to faktycznie będziemy widzieli jak to jest zdefiniowane mamy po prostu kolumny

3:25o jakiejś tam szerokości tutaj george napisał 27

3:29rem prawdopodobnie taki po prostu jest rozmiar całego

3:34kontenera i żeby to wyglądało w porządku tak to zakodował ale co ważne

3:38ustawił tutaj to grid-auto-flow i jeżeli przełączymy

3:43tą wartość to zobaczycie że teraz kolejne elementy są

3:48układane w wierszach a nie w kolumnach bo to jest wartość domyślna dla grid-auto-flow

3:53czyli jeśli byśmy dodali tutaj dodatkową własność czyli

3:58zdefiniowali kolejną kolumnę to oczywiście ten layout nie będzie już wyglądał

4:02tak dobrze nawet okazuje się że w ogóle w takim razie

4:06nie zawija to do następnych wierszy podejrzewam że dał jakieś sekcje

4:10wrappujące dane znaczniki tak by faktycznie ten

4:14konkretny przypadek obsłużyć natomiast normalnie elementy

4:19byłyby zawijane do następnych wierszy dopiero

4:23jeżeli faktycznie wszystkie kolumny są wypełnione więc jeśli wrócimy do

4:27tego stanu sprzed chwili włączymy z powrotem

4:31grid-auto-flow column no to oczywiście elementy są teraz renderowane poprawnie

4:35no i każda lista również jest gridem to znaczy jeśli

4:39zaznaczymy sobie całą listę no to widzimy że tutaj

4:44możemy znaleźć sobie kropka list nie

4:49widzę tutaj definicji tej listy pojedynczej no

4:53ale widzimy to w devtoolsach generalnie mamy trzy wiersze

4:58czyli rzeczy do zrobienia cała treść oraz

5:02dodaj nową kartę prawdopodobnie będzie tutaj gdzieś to zapisane znajdźmy

5:08grid template rows są no

5:13i faktycznie pierwsza kolumna

5:17tak naprawdę pierwszy wiersz posiada szerokość automatyczną dostosowaną

5:21do treści która się w nim znajduje następnie mamy zakres czyli

5:25faktycznie jeśli będziemy następnie mamy zakres czy jeśli

5:29faktycznie będziemy zwężali viewport a konkretnie

5:33jego wysokość to te kolumny będą nam się rozciągać bardzo fajne no

5:38i ponownie automatyczny wiersz na podstawie treści

5:42jak widać możemy bez problemu zagnieżdżać siatki tutaj

5:47george nawet zagnieździł samo body ponieważ body też

5:51grid containerem i układa nam główny layout witryny w związku

5:56z czym widzicie że to jest cały kod odpowiadający

6:00za pozycjonowanie na samym flexie oczywiście tego kodu jest znacznie więcej

6:04w kontekście kolorowania dodawania symboli

6:08marginesów odpowiednich natomiast to wszystko odpowiada

6:13za część gridową czyli za faktyczne tworzenie layoutu

6:17w gridzie no i musicie przyznać że nie jest to dużo

6:22kodu podsumowując ten konkretny przykład

6:26warto pamiętać że możemy ustawiać konkretne wartości

6:32również na wiersze czyli na przykład auto minmax

6:36i auto ponownie jeżeli chcemy otrzymać elastyczną wysokość

6:41danej kolumny gdy zmieniamy

6:46rozmiar viewportu w pionie no i o grid-auto-flow

6:50ustawionym na column jeśli faktycznie zależy nam na layout'cie który będzie układał się w kolumny

6:54a nie w dodatkowe wiersze jak

6:59w przypadku wartości domyślnej grid-auto-flow row to jest

7:03tak naprawdę dosyć podobne obecny layout czyli ten z grid-auto-flow

7:08column podobny do właściwości columns

7:13która pozwala wam układać elementy w sposób kolumnowy

7:17tak jakby to były artykuły w faktycznej papierowej gazecie to

7:22nie jest właściwość powiązana z gridem czy flexboxem jest to szczerze

7:26mówiąc dosyć stara właściwość istniejąca w css'ie

7:30już od bardzo długiego czasu i pozwala na zawianie

7:35treści w ten sposób że treść leci w kolumnie pierwszej

7:39na całą wysokość kolumny następnie kontynuowana jest w

7:43kolejnej kolumnie również od góry do dołu więc nie tak jak w gridzie

7:47na zasadzie ile elementów jest umieszczone

7:52bezpośrednio w kontenerze tylko bardziej na zasadzie podajemy liczbę kolumn

7:56w jaką chcemy rozstrzelić nasz tekst no i właściwość kolumn

8:00nam to ten tekst rozstrzeli na tyle kolumn to taka ciekawostka generalnie grid-auto-flow

8:05column jest też faktycznie właściwością o której musicie

8:10pamiętać jeśli macie tego typu layout zachęcam

8:15też gorąco do spróbowania stworzenia czegoś takiego na własną rękę albo chociaż

8:19przeanalizowania tego przykładu samodzielnie ponieważ

8:24jest to kawał dobrej roboty w kontekście stworzenia layoutu na gridzie

8:28razem z fallbackiem w przypadku jeśli dana przeglądarka

8:32grida nie wspiera