CSS Grid: Masonry layout

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

0:04o masonry layout czyli o takim layout'cie który wygląda

0:09trochę jak pinterest i składa się z tego że elementy

0:13mają stałą szerokość układane są od lewej do prawej następnie

0:18z góry na dół natomiast ich wysokość może być różna i

0:23jak zrobić to w css gridzie to

0:27jest bardzo częste pytanie zadawane przez osoby które po prostu muszą zrealizować

0:32pewną potrzebę biznesową i słysząc o css gridzie faktycznie

0:36chcą wykorzystać tą technologie do zrobienia tego konkretnego przypadku css

0:42grid nie jest idealny do stworzenia tego typu layoutów

0:46przede wszystkim dlatego bo masonry layout

0:50wygląda mniej więcej w ten sposób czyli mamy równe kolumny natomiast

0:54wysokości każdego z elementów w danej kolumnie są różne

0:58co się z tym wiąże nie możemy stworzyć jednego wiersza

1:02jednej kolumny ponieważ tutaj widzimy takie schodki co oznacza

1:07że jeden wiersz czyli elementy od jeden do

1:11pięć jeden dwa trzy cztery pięć nie mają równej wysokości wiersza

1:15i to jest największy problem w tworzeniu tego typu layoutu w gridzie

1:19można do tego co prawda dojść ale

1:23nie jest to rozwiązanie ani optymalne ani

1:28generalnie grid nie jest stworzony do tego typu wizualnej reprezentacji to

1:33co w gridzie zobaczylibyście gdybyście spróbowali coś takiego zakodować jest mniej więcej coś

1:37takiego czyli mamy elementy różnej wysokości natomiast wiersz

1:41dalej jest taki sam czyli te elementy z następnego wiersza nie mogą wskoczyć

1:45tak jakby w nav poprzedni możemy to oczywiście

1:50zrobić javascriptem i spróbować te elementy przesunąć

1:54z dołu do góry czy to jakimś nie wiem marginesem

1:58czy w ogóle wystrzeliwując je poza css grid podejść

2:03tu jest naprawdę bardzo dużo ale żeby stworzyć dobry

2:07masonry layout w oparciu o css grida musimy tak czy siak skorzystać

2:12z javascriptu dlatego uważam że css-grid nie jest stworzony

2:16do tego typu potrzeb biznesowych do tego typu stron pomimo

2:21tego że osiągnąć to można tutaj andy barefoot pokazuje

2:25jak jego podejście polega na tym że oczywiście tworzymy

2:29jakąś nie określoną liczbę kolumn w zakresie od

2:33250 pikseli do jednego fractional unit ustawiamy

2:38tam grid-gap i tak dalej natomiast w

2:42jego propozycji on ustawia każdy z

2:46elementów tak by miał wysokość przynajmniej dwóch

2:50wierszy i w zależności od tego jak dużo treści dany

2:55element będzie posiadał to już musimy wykryć javascriptem będziemy zmieniać jego

3:00rows span tak jakby czyli po prostu wysokość w pionie na

3:04ile wierszy ma się rozciągnąć i ręcznie wykalkulować to

3:08tak aby elementy układały się w ten sposób moja propozycja co do

3:12masonry layout jest taka jeśli naprawdę musicie

3:17korzystać z tego typu layoutów to nie kotujcie go sami skorzystajcie

3:22z biblioteki która takie ala pinterestowe ułożenia

3:26elementów dostarcza bo na pewno są takie elementy te biblioteki

3:30będą miały swoich maintainerów czyli osoby które dbają o

3:35te projekty o te biblioteki będziecie wiedzieli że tam nie ma bugów jeżeli będzie

3:39bug to będziecie mogli go zgłosić i możliwe że masz problem

3:43rozwiąże się sam natomiast nie proponowałbym implementacji tego samodzielnie

3:47chyba że faktycznie dobrze czujecie się w javascripcie i chcecie

3:52spróbować swoich sił przy tworzeniu tego typu layoutu css

3:56grid nie jest narzędziem do tego typu rozwiązań jeśli chcecie śmiało

4:01spróbujcie zreprodukować masonry layout może na podstawie tego artykułu na medium

4:05autorstwa andy'ego barefoota a jeśli nie to skorzystajcie z odpowiedniej biblioteki