Tailwind CSS: Sekcja ścieżek - grid w TailwindCSS

0:00Ostylujmy tą całą resztę tutaj.

0:03Oczywiście potrzebujemy nadać

0:07szerokość temu wrapperowi taką jaką ma, myślę wrapper tego obrazka.

0:13Czyli możemy sobie spokojnie tutaj zrobić width-full.

0:17Oczywiście nam zmienię tutaj całość,

0:20ale jeżeli teraz zrobimy tutaj na width i naszą arbitralną wartość,

0:26to już w tym momencie nasz 1 element będzie miał taką wartość.

0:30Natomiast ja chciałbym zaproponować Ci troszeczkę inne rozwiązanie.

0:33Otóż zostawimy to sobie

0:36na razie tak jak jest i skorzystamy sobie tutaj z grida i

0:40spróbujemy sobie ułożyć te elementy zgodnie z gridem.

0:45Czyli jeżeli mamy już jeden element

0:47zrobiony, jeszcze musimy sobie ostylować tutaj to p.

0:50Zróbmy sobie class i clamp, line-clamp, zróbmy na 4.

0:59Po czterech liniach to się nam ucina.

1:01Jak to mamy w designie?

1:02Sprawdźmy teraz.

1:04I tu mamy raz, dwa, trzy, cztery, pięć linii.

1:06Czyli możemy sobie ustawić line-clamp na 5.

1:09Zapisujemy sobie to.

1:10I widzimy, że mamy tutaj grida na najmniejszym mobilnym widoku.

1:15Mamy dwie kolumny, czyli możemy sobie

1:17przejść do naszej implementacji, skopiować sobie ten element.

1:22To jest jeden cały element.

1:24I ja teraz korzystam z magii kina i po prostu

1:27powklejam wszystkie te elementy tak jak powinny być tutaj,

1:31według tych treści. Ty sobie możesz skorzystać z tego pliku źródłowego i też

1:34zrobić to samo teraz kopiując te elementy, podmieniając odpowiednio treści.

1:40Jak widzisz udało mi się odzwierciedlić wszystkie te elementy.

1:42Teraz muszę jeszcze popracować nad stylowaniem poszczególnego z nich.

1:46Natomiast ja chciałem się najpierw skupić

1:48na tym, żeby wyświetlić je w dwóch kolumnach.

1:50Dlatego stworzymy sobie tutaj wokół nich

1:52jednego diva, czyli to będzie wrapper dla naszego grida.

1:58Sekcję zostawiamy sobie na razie w spokoju, tak jak jest.

2:01I tu mamy nasz cały wrapper.

2:02Czyli teraz popracujemy sobie i pokażę Ci jak używać utility classes

2:08Tailwinda i budować sobie jakby wyświetlanie za pomocą grida.

2:13W tym przypadku przejdziemy do dokumentacji i wpiszemy sobie tutaj grid.

2:18I mamy display grid.

2:20I w tym momencie możemy sobie ustawić display na grid.

2:24I jak widzimy mamy tutaj też utility classes jeżeli chodzi o kolumny i rzędy.

2:28Poszukajmy sobie grid cols.

2:31Jak zrobić dwie kolumny i mamy podpowiedź,

2:34utility-class grid cols 2 to są jakby dwie o tej samej szerokości kolumny.

2:38Czyli musimy sobie dla naszego wrappera

2:41dać klasę grid, żeby powiedzieć, że chcemy stworzyć właśnie grid.

2:45I w tym momencie grid col na 2, zapiszemy sobie naszą

2:49naszą klasę i przejdziemy sobie do naszej implementacji, do naszej strony.

2:53I już widzisz, mamy wyświetlanie tak jak powinno być.

2:56I teraz możemy sobie przejść tutaj do

2:59naszego dizajnu i zobaczyć jaka była odległość pomiędzy tymi dwoma elementami.

3:02To jest 12 pikseli i Tailwind też daje Ci tutaj

3:07możliwość odpowiedniego zrobienia przerwy pomiędzy, pomiędzy elementami.

3:15I tutaj możemy sobie wpisać gap

3:18i widzisz, że masz możliwość dodania GAP między kolumnami, albo ogólnie jakby całą, jakby

3:24między rzędami i kolumnami za pomocą klasy GAP.

3:28I w tym momencie sobie ustalimy ją na 4, bo 4 w sumie potrzebujemy 3, 12.

3:33Potrzebujemy tutaj gap 3,

3:36to jest 12 pikseli w naszym przypadku.

3:37Już powinny się

3:39wszystkie elementy odsunąć od siebie na 12 pikseli. Mamy tak jak powinniśmy mieć zrobione.

3:45Tutaj też jest 12 pikseli między nimi.

3:46Oczywiście na całą sekcję potrzebujemy

3:48teraz nadać nasz padding, czyli klasa p-4 tak jak na wszystkie inne.

3:54No i już mamy Te elementy, jakby wyświetlają się

3:56podobnie do tego, co jest tutaj zamierzone.

3:59Grid ma to do siebie, że bardzo łatwo będzie nam później modyfikować

4:03wyświetlanie tych elementów na większych ekranach, tak jak to widzisz tutaj.

4:08Spróbujemy sobie odzwierciedlić też te responsywne style.

4:12Natomiast na razie skupmy się na dokończeniu tego mobilnego.

4:14Potrzebujemy jeszcze nadać odpowiednie style,

4:16na audio, na te, na te tytuły, tych elementów.

4:19Czyli tu mamy Bold i 16.

4:21Przejdźmy do naszych elementów.

4:25Znajdziemy sobie elementy, które

4:26odpowiadają właśnie za tą, te H3 tutaj i napiszemy sobie klasę.

4:34Font-bold i wielkość czcionki 16.

4:38Czyli możemy sobie zostawić tak jak jest.

4:39Zapiszemy to sobie. Jak wrócimy do naszego dizajnu

4:42teraz no to wszystkie h3 mają u nas font bold.

4:45I teraz możemy sobie przesunąć wszystkie elementy p,

4:50Czyli żeby znaleźć wszystko, wszystkie elementy p, które będą nam potrzebne.

4:55No to zróbmy sobie coś takiego, że znajdziemy sobie ten element,

5:00czyli będzie ich około siedmiu, bo tyle mamy elementów.

5:03UI/UX jest ostatnim elementem.

5:05Teraz za pomocą skrótu możemy sobie przejść tutaj po tych klasach

5:11i możemy nadać tutaj margin top na wartość 2 już nam się przesunęło fajnie.

5:19I teraz musimy sobie wrócić

5:23i tutaj na h3 przejść na klasy i tutaj nadać margin top też zróbmy sobie 2.

5:29Już powinno nam się tu fajnie przesunąć.

5:32Zobaczmy sobie jak to wygląda nasz design.

5:34Tak, jest to przesunięte też od tych

5:36obrazków, także myślę, że możemy sobie zostawić to tak jak jest.

5:40Może nawet spróbujemy na jedynkę.

5:43No, wygląda to lepiej.

5:45No i jak widzisz mamy odzwierciedlone tutaj style w tej sekcji, która jest tutaj

5:51sekcją o popularnych ścieżkach nauki na eduweb.

5:55Oczywiście brakuje nam tutaj jeszcze

5:57header'a do naszej sekcji, dlatego wróćmy sobie tutaj

6:00na ten container, który mamy dla naszego grida

6:04i możemy sobie zrobić, jak to robiliśmy w innych sekcjach, za pomocą h3.

6:09Zapiszemy sobie to.

6:12I już, mamy nasz popular eduweb paths.

6:14Możemy sobie skopiować dokładnie style, które mieliśmy tutaj.

6:17Zapiszmy to sobie. No i już mamy popular eduweb paths. I Teraz możemy sobie przesunąć całość,

6:22jak to robiliśmy w tej sekcji to robiliśmy Margin top na 6.

6:26Teraz możemy sobie skorzystać tutaj z margin bottom po prostu na tą h3,

6:33margin bottom i szóstkę. Odsuniemy wtedy cały nasz widok

6:37troszeczkę poniżej.

6:38Teraz odkomentujmy sobie wszystkie sekcje, które mieliśmy wcześniej

6:42i zobaczmy sobie jak wygląda póki co nasza strona internetowa.

6:46No wszystko jest na razie, myślę, w porządku, musimy przesunąć całą

6:52sekcję eduweb path od tych opinii i zobaczmy czy rzeczywiście

6:56ta odległość nie powinno być troszkę większe. Czyli złapiemy naszą sekcję.

7:01Mamy margin top na 6.

7:04Zapiszemy sobie i już przesunęliśmy sekcję.

7:08Teraz zajmiemy się kolejnym elementem,

7:10który jest tutaj partnerzy eduweb i zostanie nam tylko footer w widoku mobilnym.