Porównanie CSS Grid oraz Flexbox

Tworzenie stron internetowych w czasach królowania przeglądarki Internet Explorer nie było przyjemnym zajęciem. Wieczne problemy z kompatybilnością oraz brak implementacji nowych właściwości zmuszały developerów na tworzeniu stron na podstawie tabel. Ówcześnie posiadamy szeroko wachlarz nowych funkcjonalności, których używamy, tworząc przepiękne serwisy www. Przyjrzyjmy się dzisiaj dwóm metodom znacząco usprawniających pracę Front-End Developerów – Grid CSS i Flexbox.

 

Kompatybilność

Pierwszym punktem starcia będzie oczywiście kompatybilność z przeglądarkami. Nikt przecież nie chce podczas testowania odkryć, że jego strona źle się wyświetla. Do testowania posłuży nam strona caniuse.com, która jest rzetelnym źródłem takich informacji. Lista wersji, na których będziemy zwracać uwagę:

• Internet Explorer 10
• Safari 7 (iPhone 4s)
• Opera Mini

 

Flexbox

Informacje ze strony caniuse.com/#feat=flexbox jasno pokazują, że metoda jest już wspierana przez flagowe przeglądarki i posiada bardzo dobrą kompatybilność. Nic nie stoi na przeszkodzie w używaniu flexbox’a w codziennej pracy.

CSS Grid

Pierwszy rzut oka na stronę caniuse.com/#feat=css-grid jasno pokazuje, że największym problemem dla metody będzie przeglądarka Opera Mini i Opera Mobile. Mimo małego procentu aktywność użytkowników  (~3.06%) jest to spory problem. Sam się do tego procenta zaliczam.

Jeden wymiar, dwa wymiary

Główną różnicą między tymi dwiema metodami to ilość wymiarów, które obsługują.

CSS Grid działa na systemie dwuwymiarowym  — oznacza to, że potrafi obsłużyć zarówno kolumny, jak i wiersze. Można zatem powiedzieć, że jest to pierwsza metoda, która pozwala stworzyć pełny układ strony bez zbędnych haków, jak w przypadku Float Grid. Dzięki niemu możemy w łatwy sposób kontrolować cały kontent, który się w nim znajduje. Jest to taka uwspółcześniona tabela, której wystarczy powiedzieć, co ma się gdzie znajdować w danym wierszu oraz kolumnie, a on już zajmie się poprawnym układaniem elementów.

Flexbox używa jednowymiarowego system, który najlepiej sprawdza do tworzenia liniowego układu. Dzięki właściwości flex-direction możemy ustalić oś, w której będą układane elementy (wiersz, kolumna).

Szablon prostej strony internetowej

Cel: Stworzenie szablonu strony na wzór wizualizacji poniżej.

<div class="layout grid">
  <header class="header"></header>
  <main class="main">
    Lorem...
  </main>
  <nav class="nav"></nav>
  <footer class="footer"></footer>
</div>

Jak widać w listingu HTML, posiadamy jeden kontener, w którym umieszczone są wszystkie elementy. Pomiędzy wierszami posiadamy przerwę o wielkości 15px a pomiędzy kolumnami o wielkości 20px. Nasz podstawowy CSS wygląda tak:

// Base
.layout {
  max-width: 800px;
  width: 100%;
  outline: 1px solid red;
  margin: 0 auto;
}
.header {
  height: 60px;
  background-color: #0357ff;
}
.footer {
  height: 60px;
  background-color: #8503ff;
}
.main {
  background-color: #ffe603;
  padding: 20px;
}
.nav {
  background-color: #68ff03;
}

Grid CSS

Zaczniemy od nadania właściwościowi dla kontenera.

.template {
  display: grid;
  grid-column-gap: 20px;
  grid-row-gap: 15px;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "header header"
    "main nav"
    "footer footer";
}

Opisy działań poszczególnych właściwości:

1. Ustaw właściwość grid dla kontenera
2. Nadaj przerwę dla kolumn i wierszy
3. Stwórz dwie kolumny w wierszu (jednostka fr obliczana jest przez działanie – ilość użytych fr * 100% )
4. Rozmieść elementy w siatce:
   pierwszy wiersz wypełnia element header
   drugi wiersz przeznaczony jest dla elementów main i nav
   ostatni wiersz wypełnia element footer

Następnie trzeba nadać nazwy grid dla elementów:

.header {
  grid-area: header;
}
.footer {
  grid-area: footer;
}
.nav {
  grid-area: nav;
}
.main {
  grid-area: main;
}

Rezultat?

Zgrabna, przejrzysta, responsywna i łatwa w modyfikacji strona. Dzięki takiej małej ilości kodu CSS udało się stworzyć nowoczesny szablon strony internetowej. Dodatkowo dla debugowania przeglądarka Google Chrome wyświetla linie pomocnicze podczas inspekcji elementów, które znacznie jeszcze bardziej ułatwiają pracę.

Flexbox

Używając metody flexbox, będziemy musieli poradzić sobie z przerwami pomiędzy kolumnami i wierszami. Pamiętajmy, że działa on na jednym wymiarze.

.layout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  > * {
    margin-bottom: 15px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}

Opisy działań poszczególnych właściwości:

1. Ustaw właściwość flex dla tego kontenera
2. Układaj elementy na osi x
3. Spraw, aby elementy nie układały się w jednej linii
4. Dodaj dla każdego elementu (prócz ostatniego) margines dolny

Nadajmy teraz właściwości dla elementów w kontenerze.

.header {
  flex: 1 1 100%;
}
.footer {
  flex: 1 1 100%;
}
.nav {
  flex: 1;
}
.main {
  flex: 2;
  margin-right: 20px;
}

Jak widać, trochę musimy kombinować z odstępem pomiędzy kolumnami w klasie main. Szerokość wierszy ustalamy przy pomocy właściwości flex.

Wynik?

Nie pierwszy rzut oka stworzyliśmy bardzo podobny szablon, ale posiada pewną różnicę. Środkowe kolumny różnią się szerokością względem CSS Grid. Również kod nie jest tak przejrzysty z uwagi na odstępy między elementami.

Podsumowanie

CSS Grid i Flexbox są nowoczesnymi metodami usprawniającymi pracę Front-End Developerów. Pozwalają w prosty sposób kontrolować flow elementów i nadawać im nowych zachowań.

CSS Grid świetnie sprawdza się do tworzenia szablonu strony. Podobny efekt uzyskamy przy pomocy metody Flexbox, jednak efekt nie będzie tak precyzyjny (wizualnie i od strony kodu), jak w CSS Grid. Sprawdza się za to idealnie przy tworzeniu jednowymiarowego kontenera, pozwalając ustawiać elementy dokładnie według wytycznych projektu. Flexbox i Grid CSS najlepiej stosować razem, dzięki czemu uzyskamy potężne narzędzie do tworzenia stron.

Najlepszym sposobem, aby doświadczyć działania obu metod to praktyka. Istnieją dwie stworzone do tego celu strony, które w prosty i ładny sposób pozwolą zademonstrować drzemiącą w nich siłę:

• http://cssgridgarden.com/#pl
• http://flexboxfroggy.com/#pl