Tailwind CSS: Rozkładanie głównych elementów za pomocą grida

0:00I teraz utility classes, która za to odpowiada to jest column-start, czyli

0:04zróbmy sobie xl-col-start i damy na numer 11, czyli na 11 kolumnie.

0:10Zobacz przesunęliśmy to już w prawą stronę.

0:12Natomiast problem jest w tym, że nie mamy tutaj dwóch rzędów i musimy

0:17powiedzieć generalnie gdzie to powinno się zacząć.

0:20Czyli możemy spróbować

0:21zrobić wystartowanie tego elementu dokładnie na pierwszym

0:26rzędzie tutaj i żeby teraz to poprawnie zrobić, musimy

0:30powiedzieć, w którym rzędzie chcemy zacząć wyświetlanie tego elementu, czyli xl:

0:35row-start-1 i już element nam przeskoczył do góry.

0:40Mamy to wyświetlone wszystkie te trzy elementy koło siebie.

0:43I teraz tutaj ten element powinien

0:45zaczynać swoje wyświetlanie dokładnie w kolumnie numer 6.

0:49Czyli możemy sobie przeskoczyć do naszej

0:51reklamy i tutaj xl-col start i damy kolumnę numer, to jest kolumna numer 6.

1:01I już przesunęliśmy naszą reklamę dokładnie w prawą stronę.

1:05Teraz musimy zadbać o to, żeby poprawnie wyświetlać te wszystkie elementy.

1:10Generalnie moglibyśmy sobie tutaj dołożyć kolejny rząd.

1:14Nie byłby to jakiś wielki problem.

1:15Natomiast próbujemy na razie to ograć bez kolejnego rzędu.

1:19Spróbujemy najpierw sobie popracować nad

1:21tą sekcją, żeby ona się wyświetla nam tutaj poprawnie.

1:24Czyli przejdźmy sobie, to jest sekcja numer 4.

1:27I przejdźmy do tego diva.

1:31I tutaj mamy póki co grid 3-kolumnowy.

1:34Dlatego właśnie te elementy wyświetlają nam się tak jak się wyświetlają.

1:38Tak że spróbujmy na dużych ekranach zmienić

1:41tego grida na jedną kolumnową, no i już elementy wyświetlają się dużo lepiej.

1:47Jeżeli chodzi o to co chcemy uzyskać.

1:50Dodatkową rzeczą, która będzie to na pewno wyczyszczenie tych wszystkich tutaj

1:55border'ów bottom i z tego co wiem to mieliśmy je na każdym elemencie nadane.

2:00Sprawdźmy sobie to teraz. Border bottom mamy jeden piksel, i na md

2:07kasowaliśmy ten border bottom.

2:11Ale tu mamy divide-x na 2, czyli w tym momencie dlatego nam to rozdziela.

2:16Robi nam Divide x na 2 czyli robi nam przerwy pomiędzy tymi elementami.

2:20Jeżeli sobie teraz na xl:

2:23divide-x na 0 ustawimy to powinny zniknąć już te kreski, które mamy tutaj.

2:29No i z tego co jeszcze tutaj wiadomo to musimy sobie border bottom

2:331 piksel mamy ustawiony na MD, czyli to jest ten kawałek, który jest tutaj.

2:38Spróbujemy na razie go po prostu usunąć.

2:41Czyli na XL border bottom ustawimy na 0 i już ten kawałek nam też zniknął.

2:49Mamy te 3 elementy.

2:50Teraz postarajmy się, żeby one były wyświetlane w taki sposób jaki byśmy

2:53chcieli, czyli teksty muszą być wyrównane do lewej strony.

2:57Te obrazki muszą być na środku.

2:59Przejdźmy teraz do naszego naszej implementacji i tutaj,

3:03gdzie mamy nasze elementy, które odpowiadają za wyświetlanie tych tekstów.

3:09Natomiast na pewno chcemy sobie ten tekst center zamienić.

3:13Tutaj w przypadku tego elementu left.

3:18Spróbujmy sobie jak to będzie wyglądało text left i już ten element wyświetla się

3:24dobrze. Teraz widzę

3:25mieliśmy tutaj customowe padding, czyli też na xl

3:29musimy sobie złapać teraz te elementy.

3:34To są te trzy elementy.

3:35Przejdziemy na padding i na xl wyresetujemy sobie te paddingi na zero

3:41na razie. Nie chcemy mieć żadnych paddingów w tych elementach.

3:45Natomiast teraz każde kolejne elementy też chcą mieć na xl

3:51text-left.

3:54I już mamy wyrównanie tych tekstów do lewej strony.

3:57Spójrzmy teraz jak wygląda ten design dostarczony przez designera.

4:01Otóż widać, że mamy teraz przerwy pod każdym z tych tekstów.

4:07Mamy taki border na bottom ustawiony. Pod tym ostatnim

4:10możemy sobie pomyśleć jak to zrobił.

4:11Natomiast pod tymi dwoma możemy sobie teraz spokojnie już border bottom ustawić.

4:16Czyli przejdźmy do naszego Einsteina.

4:18I tutaj pod tym p możemy na xl zrobić border bottom.

4:25Niech będzie jeden piksel. Przeskoczymy na naszą stronę.

4:30Już nam się pojawił tutaj border bottom.

4:32To samo sobie zrobimy dla tego drugiego elementu, dla Sokratesa,

4:37czyli złapmy sobie ten border bottom 1 piksel na xl.

4:41Skoczmy do Sokratesa i tutaj na to p też sobie nałożymy na jeden border. Mamy.

4:46No i dodatkowo potrzebujemy na te dwa elementy jakiś padding, żeby odsunąć od

4:50siebie wszystko, co my tutaj mamy, czyli bottom na xl,

4:59zostawmy na 4.

5:02Przesunęły nam się elementy.

5:05Oczywiście nie PX tylko PB.

5:08I już mamy przesunięte elementy od siebie w dół.

5:12To na razie sobie zostawimy.

5:13Teraz pytanie jest jak zrobić te podziały pomiędzy tymi elementami?

5:19I tutaj z pomocą przychodzi nam kolejny raz Divide.

5:22Jako, że mamy tutaj grida, który ma 12

5:25kolumn, możemy zrobić teraz Divide x, XL, Divide X.

5:31Zróbmy na 2.

5:32Sprawdźmy jaki uzyskamy efekt.

5:35No pojawiły się te podziałki tutaj, o które nam chodzi.

5:38Natomiast problem jest z wyświetlaniem tutaj tego elementu z tego

5:42względu, że tu prawdopodobnie mamy jakiś padding narzucony i padding albo margin.

5:48Dlatego też właśnie tutaj

5:49ta podziałka się przerywa i nie jest w całości wyświetlana.

5:53Sprawdźmy to sobie teraz,

5:55który element tutaj odpowiada za to, że mamy taką przerwę?

5:59Widzimy, że jest tutaj ta reklama, która ma nałożony margines na top 6.

6:06Czyli przejdźmy teraz do kodu,

6:08mamy naszą reklamę na xl, nie chcemy tego marginesu.

6:13Już nie mamy naszego marginesu.

6:14Możemy teraz skupić się na odpowiednim wystylizowaniu tego elementu.

6:19Pierwsza rzecz, która się rzuca w oczy to na pewno nie chcemy tego napisu

6:22advertisement na xl, czyli zróbmy sobie hidden.

6:28Już napis zniknął.

6:30Padding bottom. Tu mamy narzucony padding bottom na 6 to

6:35też sobie usuniemy, żeby nie mieć tej białej części, która jest pod spodem.

6:39Czyli XL: pb na 0.

6:42Już nam przesunęło wszystko odpowiednio.

6:45Teraz na czym się trzeba skupić, to na pewno na tym, żeby to tutaj miało

6:49odpowiednią wysokość, bo póki co jest to za duże.

6:52I teraz możemy się zastanowić w jaki sposób to ograć.

6:55Pierwsza rzecz, którą tutaj widać na na

6:58designie to to, że te dwa elementy są tak jakby wyrównane w jednej linii.

7:05Czyli można by przypuszczać, że designer

7:07miał tutaj na myśli zrobienie grida jako jednego całego.

7:11Natomiast jakby rozłożenie tych elementów tutaj, to tak jakby były dwa rzędy.

7:17Czyli mamy jeden rząd tutaj, i drugi rząd to ten jaśniejszy, czerwony poniżej.

7:21I ten pierwszy element rozciąga się na dwa rzędy.

7:25Możemy spróbować teraz tego podejścia,

7:27Zobaczymy jak to wyjdzie właśnie z tą reklamą.

7:31Przeskoczymy sobie teraz na naszą stronę,

7:33żebyśmy widzieli na żywo podgląd i spróbujmy sobie dołożyć kolejny rząd,

7:38żeby móc lepiej sterować tutaj rozłożeniem tego elementu i wysokością całości.

7:43Teraz spróbujemy sobie określić dokładnie rzędy, które tutaj będziemy mieli.

7:47Wróćmy do naszego designu, żeby zobaczyć co na myśli miał nasz designer.

7:51I tutaj z tego co widzę to to ma 87 pikseli.

7:55Czyli możemy sobie ustalić tak naprawdę,

7:58że mamy tutaj dwa rzędy i drugi z tych rzędów ma mieć 87 pikseli wysokości.

8:03Jako, że Tailwind nie dostarcza nam

8:05dokładnie takiej funkcjonalności, możemy sobie tutaj na xl ustawić rows, row 2.

8:12Natomiast to nic nie da tutaj, bo potrzebujemy, my

8:17nie potrzebujemy takich samych rzędów, tylko potrzebujemy

8:21ręcznie określić w jaki sposób powinien się nasze rzędy tutaj układać.