CSS Grid, czyli responsywne układy stron internetowych

Kiedyś projektowanie responsywnych układów stron wymagało długich godzin spędzonych z float’em, position:absolute, a potem z Flexboksem. Dziś na szczęście mamy narzędzie, które znacznie to upraszcza. Czym jest CSS Grid i dlaczego warto z niego korzystać? Wyjaśnimy to w poniższym tekście – zapraszamy do lektury!

CSS Grid – co to?

CSS Grid to system projektowania układów stron internetowych w dwóch wymiarach – wierszach i kolumnach. Pozwala precyzyjnie rozmieszczać elementy na stronie bez konieczności stosowania dodatkowych wrapperów czy floatów. Wyobraź sobie stronę jako siatkę – złożoną z pól, które możesz dowolnie konfigurować. Na to właśnie pozwala Grid.

Pierwsze próby wdrożenia takiego rozwiązania w CSSie pojawiły się jeszcze w 2011 roku, gdy Microsoft zaimplementował uproszczoną wersję Grida w przeglądarce Internet Explorer 10, z własną składnią (-ms-grid). Było to jednak rozwiązanie eksperymentalne i mało intuicyjne.

Przełom nastąpił dopiero w 2017 roku, kiedy dopracowaną już wersję CSS Grid oficjalnie wprowadzono do specyfikacji W3C i niemal jednocześnie zaimplementowano we wszystkich popularnych przeglądarkach. Grid błyskawicznie zdobył popularność wśród projektantów interfejsów i front-endowców – a dziś jest niekwestionowanym standardem w web devie. 

Jak działa CSS Grid i dlaczego warto go używać?

Tak jak powiedzieliśmy, CSS Grid działa na jednej, prostej zasadzie: dzielisz przestrzeń strony na kolumny i wiersze, a potem umieszczasz w niej elementy – jak w tabeli, ale bez jej ograniczeń. Możesz przypisywać elementy do konkretnego pola siatki, rozciągać je na kilka kolumn lub wierszy, przesuwać, łączyć – bez kombinowania z marginesami czy z float’em.

1. Tworzenie siatki kolumn i wierszy

W Gridzie podstawą są właściwości:

• display: grid – aktywuje grid layout;
• grid-template-columns i grid-template-rows – określają strukturę układu;
• grid-template-areas – pozwala opisać strukturę słownie (np. “header”, “main”, “footer”).

Przykład: 

Elementy przypisujesz za pomocą grid-area, np.:

2. Elastyczność i skalowalność

CSS Grid powstał przede wszystkim z myślą o responsywności – jego największe zalety wychodzą właśnie przy pracy nad interfejsami pod urządzenia o różnych rozdzielczościach. 

Zamiast tworzyć odrębne media query dla smartfonów, tabletów i większych ekranów, z gridem możesz opisać zachowanie elementów siatki przy pomocy:

• fr – określa, jaką część przestrzeni ma zajmować siatka;

• minmax() – definiuje minimalną i maksymalną wielkość;
• auto-fit i auto-fill – wymusza automatyczne rozmieszczanie kolumn.

Przykład:

W ten sposób siatka automatycznie dopasuje się do wymiarów każdego ekranu bez żadnego większego wysiłku z Twojej strony.

3. Dowolne rozmieszczanie elementów

Grid zostawia też dużą elastyczność, jeśli chodzi o rozmieszczanie elementów na siatce.

Możesz przypisać dowolny element do konkretnej pozycji:

albo użyć skróconej składni z span:

I to wszystko bez konieczności zmieniania kolejności elementów strony w HTML.

4. Porządek w kodzie i semantyka

Wspomniane już grid-template-areas pozwala budować układ jak z klocków LEGO – z jasnym podziałem na strefy:

A to nie tylko porządkuje kod, ale też ułatwia współpracę w zespole – każdy, kto zna choć podstawy CSSa od razu zrozumie, co gdzie powinno się znajdować.

5. Kompatybilność z komponentami i frameworkami

I na koniec – CSS Grid świetnie współpracuje z Reactem, Vue i innymi frameworkami JS, ze standardami Web Components i z systemami szablonów. Możesz więc zaprojektować kontener raz, a potem wielokrotnie używać go z różnymi komponentami w środku, bez potrzeby nadpisywania styli lokalnie.

Jak zacząć przygodę z Gridem?

Praca z układem siatki jest naprawdę prosta – opanowanie CSSowego gridu nie powinno Ci zająć zbyt długo. Od czego możesz zacząć?

Na przykład od prostych generatorów; tam oswoisz się z samą zasadą działania siatek. Na start polecamy CSS Grid Generator lub Layoutit! Grid oraz świetny (i darmowy) przewodnik dla początkujących, Learn CSS Grid.

Warto też sprawdzić, jak z gridu korzystają inni front-endzi. Zajrzyj przez dev tools Chrome’a lub Firefoxa do kodu stron, które lubisz – i po prostu poćwicz czytanie cudzych layoutów. To pomoże Ci zrozumieć, jak można poradzić sobie z responsywnością i zorganizować przestrzeń na bardziej rozbudowanych witrynach.

Zachęcamy też do lektury naszego bloga, na którym znajdziesz poradniki zarówno ze świata SEO oraz marketingu, jak i web developmentu!