Nie wiem czy śledzicie nowinki ze świata css ale niedawno pojawiła się w nim nowość w postaci CSS-Grid. Pozwala w prosty sposób stworzyć szablon strony w czystym css. Jest to druga nowość obok już popularnego flexboxa, która ułatwia ustawianie elementów na stronie dlatego warto go poznać i zacząć używać, szczególnie, iż według canIUse większość przeglądarek już go wspiera
Słowo wstępu
CSS-Grid jest to system, który pozwala na tworzenie szablonu strony. Jest on dwuwymiarowy( w przeciwieństwie do flexboxa, który jest jedno wymiarowy) czyli pozwala na skonfigurowanie zarówno wierszy jak i kolumn (w flexboxie nasz div mógł zawierać rząd albo kolumnę ale nigdy i jedno i drugie). Możemy rozróżnić tutaj dwa nadrzędne elementy czyli Grid Container (element, który będzie rodziciem) oraz Grid Items(elementy, które są dziećmi). Możemy również zagnieżdżać elementy rodziców w sobie tworząc zagnieżdżone szablony.
Czas na trochę kodu
Jako, iż najprościej pokazywać takie rzeczy na przykładach postanowiłem stworzyć na gwałtownie szablon standardowej strony przy wykorzystaniu tylko CSS-Grid. Jako standardowy mam na myśli taki który będzie zawierać nagłówek, dwa panele boczne oraz stopkę. Na obrazku poniżej możecie zobaczyć przykładowy widok. Całość jest również dostępna na githubie.
Tak wygląda nasz plik html. Wiele tutaj nie ma do opisywania więc nie będę się nad nim rozwodził. Została tutaj napisana struktura jaką chcę uzyskać. Teraz wystarczy tylko odpowiednio dopisać style w pliku style.css. Na pierwszy ogień pójdzie znacznik body, który stanie się Grid Container'em.
Robimy to tak jak widać powyżej. Najważniejsze jest adekwatność display: grid dzięki, któremu informujemy przeglądarkę, iż będziemy korzystać z CSS-Grid oraz daje nam możliwość korzystania z nowych adekwatności: grid-template-columns oraz grid-template-rows. Pierwszy z nich określa ile oraz jak szerokich kolumn będziemy używać. Każda wartość to jest nowa kolumna. Podobnie jest w przypadku drugiej adekwatności gdzie definiujemy wiersze. Teraz nasza przeglądarka widzi następujący szkielet:
Wystarczy wstawić w odpowiednie miejsca nasze elementy. Możemy to zrobić na dwa sposoby. Pierwszy z nich to zadeklarowanie dla wszystkich naszego elementu gdzie się zaczyna i kończy. Robimy to dzięki grupy adekwatności grid-(column|row)-(start|end). Musimy tutaj podać liczbę oznaczającą od którego wiersza/kolumny chcemy zacząć oraz na której zakończyć. Numeracje zarówno dla kolumn i wierszy zaczynają się od wartości 1. W kodzie wygląda to następująco:
I reszta elementów wygląda podobnie. jeżeli chcecie zobaczyć to zapraszam do repozytorium gdzie to znajdziecie jako zakomentowany kod. Dlaczego zakomentowany? Ponieważ istnieje według mnie prostszy sposób na ułożenie elementów na siatce. W Grid Containerze możemy skorzystać z adekwatności grid-template-areas.
Tak jak można zobaczyć jest to widok naszej strony przedstawiony przy pomocy odpowiednio nazwanych obszarów. Każda linia natomiast to osobny rząd. Musimy mieć taką ilość obszarów ile mamy kolumn oraz tyle linii ile mamy wierszy. Oprócz nazwy obszaru możemy wstawić kropkę(oznacza pustą komórkę) lub none(nienazwany obszar). W moim przypadku wykorzystałem kropkę do zdefiniowania marginesów strony. Jedyna rzecz jaka została do zrobienia to przypisać nasze elementy do odpowiednich obszarów przy pomocy adekwatności grid-area
W ten sposób otrzymujemy dokładnie ten sam widok co powyżej. To, iż widok wygląda tak jak sobie założyłem możecie zobaczyć tutaj: github.
Jak dla mnie jest to dużo lepszy sposób na tworzenie szablonu strony niż manewrowanie divami. Użycie nowych adekwatności CSS pozwala w znaczy sposób uprościć proces tworzenia podstawowego szablonu oraz skrócić czas jego tworzenia. Szczególnie dla osób początkujących może to być ułatwienie. A wy co o tym myślicie? Podoba wam się ta nowa funkcjonalność? Używaliście już na produkcji? Zapraszam do komentowania i dzielenia się swoimi przemyśleniami na temat CSS-Grid.
