Zgodnie z zapowiedzią, w tym tygodniu w całości skupiłem się na Grid. Najpierw teoria, potem praktyka. Znając Flex i Grid poważnie zastanawiam się po co komu Bootstrap, albo Bulma? Zastanawiam się tak bardzo, że chyba wrzucę jedno z tych środowisk to planu nauki na 2020 rok.

Wracając do Grida, to podobnie jak w przypadku Flexa w podsumowaniu tego tygodnia skupię się, na przedstawieniu najważniejszych zagadnień związanych z tym narzędziem i krótkim podsumowaniu możliwości jakie daje.

Grid, podobnie jak Flex oddziałuje na bezpośrednie dzieci elementu w którym ustawimy właściwość CSS display: grid. Jednak samo ustawienie parametru display: grid to za mało, żeby zauważyć jakieś zmiany w wyglądzie strony. W wersji minimalnej potrzebujemy jeszcze podać na ile kolumn Grid ma podzielić nasz kontener. Jednak same kolumny, to nie wszystko. Największą zaletą Grida jest to, że pozwala nam podzielić wybrany kontener na dowolną ilość kolumn i wierszy. Dzięki temu uzyskujemy „siatkę” w której dowolnie możemy lokować kontent. Czy może być lepiej? Oczywiście tak.

Oprócz możliwości utworzenia dowolnej siatki w wybranym elemencie strony, Grid pozwala również dopasowywać ilość kolumn/wierszy do zawartości kontentu. Jak się domyślasz, ta właściwość kapitalnie pomaga w tworzeniu responsywnych stron. W praktyce, zaprojektowanie dobrze wyglądającej strony na różnej wielkości ekranach może w ogóle nie wymagać od Ciebie użycia media queries. Cudownie prawda?

Wróćmy na moment do budowania layoutu elementu, któremu nadaliśmy właściwość display: grid. Za pomocą grid-template-rows i grid template-columns możemy utworzyć dowolną ilość kolumn i wierszy. Np.:

display: grid;
grid-template-columns: 1fr 1fr 2fr 200px;
grid-template-rows: 100px 200px 400px 100px;

Kod zapisany powyżej spowoduje utworzenie 4 kolumn o szerokościach: 1fr, 1fr, 2fr, 200px, oraz czterech wierszy o wysokościach 100px, 200px, 400px i 100px.

Wielkości kolumn i wierszy mogą być podawane we wszystkich jednostkach obsługiwanych przez CSS łącznie z wykorzystaniem funkcji calc. Co więcej, przy tworzeniu layoutu bardzo pomocna jest funkcja repeat. Pozwala nam tworzyć wielokrotnie kolumny lub wiersze bez pisania długich linijek kodu np.:

grid-template-columns: 1fr 1fr 1fr  1fr 1fr;
można zapisać prościej:
grid-template-columns: repeat(5, 1fr);

Magię dotyczącą responsywności strony można uzyskać poprzez korzystanie z automatycznych generatorów oferowanych przez Grid:

Auto-fill – liczy samemu ile kolumn, lub wierszy ma wygenerować, żeby pomieścić wszystkie elementy, lub zapełnić cały kontener np.: grid-template-columns: repeat(auto-fill);

Auto-fit – również utworzy automatycznie liczbę kolumn lub wierszy, ale puste kolumny będą miały szerokość/wysokość 0px;

Tworzenie automatycznie kolumn i wierszy to nie wszystko, Grid dysponuje również właściwościami pozwalającymi na automatyczne dopasowanie wielkości kolumny/wiersza do zawartości:

Max content to jednostka wirtualna, która zajmuje dokładnie tyle miejsca, ile potrzeba na to, żeby zawartość największego boxa w danej kolumnie lub wierszu wyświetliła się poprawnie.

Min content to jednostka wirtualna, która zajmuje dokładnie tyle miejsca, żeby upakować content bez efektu overflow.

Min-max function –  pozwala ustawić wartość minimalną i maksymalną kolumny wiersza np..: grid-template-rows: repeat(2, minmax(150px, min-content));

Jeżeli chodzi o umiejscowienie w siatce kolejnych elementów, to układane są one od lewa do prawa, z góry na dół zgodnie z kolejnością w jakiej występują w kodzie html. Jeżeli chcemy, aby któryś element lub elementy były wyświetlane w innej kolejności można im nadać właściwość order i podać liczbę, która będzie interpretowana przez Grid jako priorytet danego elementu.

Wiedząc już, że Grid pozwala stworzyć siatkę na stronie możesz się zastanawiać co z elementami, które są większe i nie mieszczą się w jednej kolumnie/wierszu? To świetne pytanie. Rozwiązania są dwa, w zależności od tego co chcemy osiągnąć. Jeżeli potrzebujemy, żeby jeden element wysunął się poza kontener to wystarczy ustawić wielkość takiego elementu i o ile nie ustawiliśmy właściwości min-content to taki element będzie „wystawał” poza kontener.

Drugi sposób jest taki, żeby określić obszar zajmujący kilka kolumn/wierszy. Zdefiniować go można jako grid-area. Sposobów definiowania jest kilka. Można określić numery kolumn i wierszy które grid-area ma zajmować, podać startowy box i określić ile kolejnych ma zajmować grid-area, lub określić początek obszaru i wskazać, że obszar powinien się kończyć na krawędzi kontenera.

Do tej pory omówiliśmy sposób umieszczania elementów w siatce. Pora na pozycjonowanie elementów względem boxu w którym się znajdują. Pozycjonowanie elementów w kontenerze można zdefiniować za pomocą właściwości:

• Justify-items;
• Aling-items;
• Justify-content;
• Align-content;

Dodatkowo można wypozycjonować pojedynczy element za pomocą właściwości nadanych temu elementowi:

• Justify-self;
• Align-self.

Grid jest świetnym narzędziem do tworzenia layoutów na stronie, a w połączeniu z flexem tworzą narzędzie, które znacząco ułatwia pracę nad stroną. Osobiście zakochałem się w tych dwóch narzędziach.

W tym tygodniu na pracy ze stronami spędziłem szesnaście godzin, z czego większość na projekcie strony www dla córki. Ten projekt będzie niezłym podsumowaniem tego, czego się nauczyłem do tej pory. Na pewno pochwalę się efektami pracy na blogu.