CSS Grid: Grid Tetris

0:00Cześć witam cię w kolejnej lekcji z kursu css grid zaawansowane layouty

0:04i chciałbym przedstawić ci jeszcze jeden ciekawy przykład zastosowania

0:08grida znalazłem codepen na nilsa schonwalda który

0:12stworzył na podstawie css grida no takiego tetrisa który

0:16sam się układa ale faktycznie jest to całe

0:20zbudowane na siatce jeżeli zbudujemy to za pomocą css

0:25grid to możemy podejrzeć jak stworzona jest ta siatka że te bloki faktycznie

0:29tam są że one są ustawiane natomiast jakkolwiek ciekawy

0:34ten przykład nie jest może wprowadzić błędne

0:38założenia co do rozumienia grida ponieważ w gridzie nie ma możliwości stworzenia

0:43takiego kształtu czy takiego wszystkie elementy

0:47grida muszą być prostokątami czyli to

0:52byłby jak najbardziej poprawny element grida to

0:57również ale wszystkie nieprostokątne kształty

1:01to nie są pojedyncze elementy a przynajmniej nie

1:05są ułożone w siatce w ten konkretny sposób dlaczego możemy

1:09podejrzeć to w artykule na css-tricks autorstwa

1:14ollie williamsa no i tutaj widzimy pierwsza rzecz która

1:18pierwsza rzecz która rzuca nam się w oczy w tym obszernym artykule to

1:23jest to że nie możesz obszarów w kształcie klocków

1:27tetrisa owszem możesz układać różne elementy na siatce

1:31w ten sposób aby sprawiały wrażenie całości natomiast w htmlu

1:35muszą to być osobne elementy spotkaliśmy się

1:39z tym problemem podczas tworzenia responsywnego layoutu

1:43poprzez grid-template-areas i tam faktycznie przypadkowo

1:47zadeklarowaliśmy że sidebar miał w

1:51wierszu 3 szerokości czyli był sidebar sidebar sidebar no

1:55i niestety w pionie też miał dwie wysokości czyli sidebar sidebar

1:59miał taką odwróconą elkę i jako że miał odwróconą elkę

2:04nie był prostokątem to css grid nie mógł tego wyrenderować jeśli

2:08zapisalibyśmy to poprzez grid-row czy grid-column to

2:12css grid stworzyłby nam kwadrat o takiej szerokości

2:16i wysokości nie stworzyłby elki czyli jeśli stworzyliśmy przez grid-template-areas

2:21kształt L to nie jest to poprawna notacja i css grid tego nie

2:25wyświetli w związku z czym jest to bardzo ciekawy przykład bardzo fajny codepen

2:29natomiast pamiętajcie że nie można stworzyć kształtów

2:33nieprostokątnych w css gridzie które faktycznie respektują ułożenie

2:37siatki