Dwa filary nowoczesnych layoutów CSS

CSS Grid i Flexbox to dwa najważniejsze narzędzia do budowy layoutów w nowoczesnym CSS. Oba są powszechnie wspierane przez przeglądarki, oba rozwiązują problem rozmieszczania elementów na stronie — ale robią to w fundamentalnie różny sposób. Zrozumienie tych różnic pozwala wybrać właściwe narzędzie do konkretnego zadania.

Flexbox — jednowymiarowy układ

Flexbox (Flexible Box Layout) został zaprojektowany do rozkładania elementów w jednym wymiarze — w wierszu lub w kolumnie. Jest idealny, gdy potrzebujemy kontrolować rozmieszczenie elementów wzdłuż jednej osi.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Ten prosty zapis tworzy pasek nawigacji, w którym elementy są równomiernie rozłożone w poziomie i wycentrowane w pionie. To kwintesencja Flexboxa — prosty, intuicyjny i skuteczny dla jednowymiarowych układów.

Flexbox sprawdza się najlepiej w:

  • Paskach nawigacji i menu
  • Układaniu przycisków i formularzy
  • Centrowaniu elementów (pionowo i poziomo)
  • Rozkładaniu elementów w jednym wierszu z różnymi odstępami
  • Komponentach kart, gdzie treść musi się rozciągać

Kluczowa właściwość flex-wrap: wrap pozwala elementom przenosić się do nowego wiersza, gdy nie mieszczą się w kontenerze. To daje pewne możliwości dwuwymiarowe, ale kontrola nad wierszami jest ograniczona — Flexbox nie pozwala precyzyjnie zarządzać relacjami między wierszami.

CSS Grid — dwuwymiarowa siatka

CSS Grid to system layoutu zaprojektowany do pracy w dwóch wymiarach jednocześnie — kontrolujemy zarówno kolumny, jak i wiersze. To prawdziwa siatka, która pozwala precyzyjnie definiować strukturę całej strony.

.page-layout {
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  min-height: 100vh;
}

Ten kod definiuje klasyczny układ strony z nagłówkiem, stopką, paskiem bocznym, treścią główną i dodatkową kolumną — wszystko w kilku liniach CSS. Próba osiągnięcia tego samego z Flexboxem wymagałaby zagnieżdżonych kontenerów i znacznie więcej kodu.

CSS Grid sprawdza się najlepiej w:

  • Layoutach całych stron (header, sidebar, main, footer)
  • Galeriach zdjęć i siatce kart
  • Układach wymagających precyzyjnego pozycjonowania w dwóch osiach
  • Dashboardach z widgetami różnych rozmiarów
  • Każdym układzie, gdzie elementy muszą się wyrównywać zarówno w pionie, jak i w poziomie

Praktyczne porównanie

Rozważmy konkretny przykład — siatkę kart produktów. Chcemy, żeby karty układały się responsywnie, wypełniając dostępną przestrzeń.

Podejście z Flexboxem:

.products {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.product-card {
  flex: 1 1 300px;
}

Działa, ale ma wadę: ostatni wiersz może mieć karty rozciągnięte na pełną szerokość, jeśli jest ich mniej niż w pozostałych wierszach. Potrzebne są dodatkowe hacki, żeby to naprawić.

Podejście z CSS Grid:

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

Jedna deklaracja grid-template-columns rozwiązuje problem elegancko. auto-fill tworzy tyle kolumn, ile się zmieści, a minmax(300px, 1fr) gwarantuje, że każda karta ma co najmniej 300px, ale rozciąga się równomiernie. Ostatni wiersz zachowuje ten sam rozmiar kart co pozostałe.

W tym przypadku Grid jest wyraźnie lepszym wyborem.

Kiedy użyć którego — praktyczna reguła

Oto prosta zasada, która sprawdza się w większości przypadków:

  • Flexbox — gdy rozmieszczasz elementy w jednym kierunku i zależy Ci na elastycznym dostosowaniu do dostępnej przestrzeni. Idealny dla komponentów wewnątrz sekcji.
  • CSS Grid — gdy potrzebujesz kontroli nad dwuwymiarowym układem lub chcesz zdefiniować strukturę strony. Idealny dla layoutów i siatek.

Warto też pamiętać, że te narzędzia świetnie się uzupełniają. Typowy wzorzec to:

/* Grid dla layoutu strony */
.page {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 2rem;
}

/* Flexbox dla nawigacji wewnątrz headera */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Wsparcie przeglądarek

W 2024 roku oba mechanizmy mają pełne wsparcie we wszystkich nowoczesnych przeglądarkach. Jedyny wyjątek to subgrid (część specyfikacji CSS Grid Level 2), który dopiero od niedawna jest obsługiwany w Chrome i Edge. Jeśli nie musisz wspierać Internet Explorera (a w 2024 roku naprawdę nie musisz), możesz swobodnie używać zarówno Grid, jak i Flexbox.

Typowe błędy

  • Używanie Grid do wszystkiego — dla prostego wycentrowania elementu Flexbox jest prostszy i czytelniejszy
  • Zagnieżdżanie Flexboxów zamiast użycia Grid — jeśli masz trzy poziomy zagnieżdżonych flexów, prawdopodobnie Grid rozwiąże problem lepiej
  • Ignorowanie gap — zarówno Grid, jak i Flexbox wspierają właściwość gap, która zastępuje stare hacki z marginami

Podsumowanie

CSS Grid i Flexbox to nie konkurenci — to partnerzy. Grid zapewnia dwuwymiarową strukturę całej strony, Flexbox dba o elastyczne rozmieszczenie elementów wewnątrz komponentów. Kluczem jest zrozumienie mocnych stron każdego z nich i umiejętne łączenie obu podejść. W praktyce większość stron korzysta z obu narzędzi jednocześnie — i tak właśnie powinno być.