Grid + Flexbox - Kiedy Użyć Czego

W arsenale egipskiego architekta znajdowały się różne narzędzia - dłuto do precyzyjnej rzeźby i dźwignia do przenoszenia wielkich bloków. Podobnie w CSS masz dwa potężne systemy układu: CSS Grid i Flexbox. Każdy z nich ma swoje mocne strony i idealne zastosowania. Nauczmy się, kiedy sięgnąć po które narzędzie!

CSS Grid - Dwuwymiarowy Układ

CSS Grid to system dwuwymiarowy - kontrolujesz jednocześnie kolumny I wiersze. Użyj go, gdy potrzebujesz pełnej kontroli nad układem w obu osiach:

1/* Grid: idealny do całych layoutów stron */
2.page-layout {
3  display: grid;
4  grid-template-areas:
5    "header  header  header"
6    "nav     main    aside"
7    "footer  footer  footer";
8  grid-template-columns: 200px 1fr 250px;
9  grid-template-rows: auto 1fr auto;
10  min-height: 100vh;
11}

Kiedy wybrać Grid:

• Layout całej strony - header, sidebar, main, footer
• Galerie i dashboardy - siatki kart o różnych rozmiarach
• Elementy o stałych pozycjach - precyzyjne rozmieszczenie w siatce
• Gdy potrzebujesz kontroli w obu osiach jednocześnie
• Nakładające się elementy - grid pozwala na overlap

Flexbox - Jednowymiarowy Układ

Flexbox to system jednowymiarowy - kontrolujesz układ w jednym kierunku na raz (wiersz LUB kolumna). Użyj go do układania elementów w linii:

1/* Flexbox: idealny do nawigacji */
2.navbar {
3  display: flex;
4  justify-content: space-between;
5  align-items: center;
6  padding: 1rem 2rem;
7}
8
9/* Flexbox: idealny do centrowania */
10.hero-section {
11  display: flex;
12  flex-direction: column;
13  justify-content: center;
14  align-items: center;
15  min-height: 400px;
16}

Kiedy wybrać Flexbox:

• Nawigacje i paski narzędzi - elementy w jednej linii
• Centrowanie elementów - szybkie i proste z flex
• Dynamiczna zawartość - elementy dostosowują się do contentu
• Małe komponenty - przyciski, karty, formularze
• Gdy nie znasz z góry liczby elementów

Praktyczne Porównanie

Zobaczmy ten sam problem rozwiązany na oba sposoby:

Przykład 1: Trzy karty obok siebie

1/* Flexbox - karty dostosowują się do contentu */
2.cards-flex {
3  display: flex;
4  gap: 20px;
5  flex-wrap: wrap;
6}
7
8.card-flex {
9  flex: 1 1 300px;  /* Rośnie, kurczy się, min 300px */
10}
11
12/* Grid - karty mają równe rozmiary */
13.cards-grid {
14  display: grid;
15  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
16  gap: 20px;
17}

Różnica? W Flexbox karty mogą mieć różne rozmiary jeśli content jest różny. W Grid każda karta ma dokładnie taki sam rozmiar. Jeśli chcesz równomierną siatkę - wybierz Grid. Jeśli chcesz elastyczność - Flexbox.

Przykład 2: Nawigacja

1/* Flexbox - naturalny wybór dla nav */
2.nav {
3  display: flex;
4  gap: 1rem;
5  align-items: center;
6}
7
8.nav-logo { margin-right: auto; }  /* Logo po lewej, reszta po prawej */

Dla nawigacji Flexbox jest zdecydowanie lepszym wyborem - elementy są w jednej linii i łatwo kontrolujesz ich rozłożenie.

Łączenie Grid + Flexbox

Najlepsze rezultaty uzyskasz łącząc oba systemy! Grid do głównego layoutu, Flexbox do komponentów wewnętrznych:

1/* Grid: główna struktura strony */
2.page {
3  display: grid;
4  grid-template-areas:
5    "header"
6    "main"
7    "footer";
8  grid-template-rows: auto 1fr auto;
9  min-height: 100vh;
10}
11
12/* Flexbox: nawigacja w headerze */
13.header {
14  grid-area: header;
15  display: flex;
16  justify-content: space-between;
17  align-items: center;
18  padding: 1rem 2rem;
19}
20
21/* Grid: siatka kart w main */
22.main {
23  grid-area: main;
24  display: grid;
25  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
26  gap: 1.5rem;
27  padding: 2rem;
28}
29
30/* Flexbox: zawartość pojedynczej karty */
31.card {
32  display: flex;
33  flex-direction: column;
34}
35
36.card-body {
37  flex: 1;  /* Wypełnia dostępną przestrzeń */
38}
39
40.card-footer {
41  display: flex;
42  justify-content: space-between;
43  align-items: center;
44}
45
46/* Flexbox: stopka */
47.footer {
48  grid-area: footer;
49  display: flex;
50  justify-content: center;
51  gap: 2rem;
52  padding: 1rem;
53}

Szybka Ścieżka Decyzyjna

Zastanów się nad swoim zadaniem:

1. Układasz całą stronę? -> Grid (grid-template-areas)
2. Tworzysz siatkę kart/galerię? -> Grid (repeat + auto-fit)
3. Układasz elementy w jednej linii? -> Flexbox
4. Centrujesz element? -> Flexbox (lub Grid z place-items)
5. Potrzebujesz kontroli w 2 osiach? -> Grid
6. Elementy mają różne rozmiary i dynamiczny content? -> Flexbox
7. Elementy powinny mieć równe rozmiary w siatce? -> Grid

To jak wybór narzędzi w warsztacie architekta piramidy - dłuto do detali (Flexbox), dźwignia do wielkich bloków (Grid). Razem tworzą monumentalne budowle!

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Responsywny Grid Layout</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Responsywna Galeria Artefaktow</h1>
11    <div class="gallery">
12        <div class="item featured">Maska Tutanchamona</div>
13        <div class="item">Kamien z Rosetty</div>
14        <div class="item">Papirus Ebersa</div>
15        <div class="item">Sfinks z Gizy</div>
16        <div class="item">Obelisk Kleopatry</div>
17        <div class="item">Skarabeusz</div>
18        <div class="item">Kanopa</div>
19        <div class="item">Amulet Ankh</div>
20    </div>
21    <!-- Zadanie: -->
22    <!-- 1. Uzyj repeat(auto-fit, minmax(200px, 1fr)) -->
23    <!-- 2. .featured: grid-column: span 2 -->
24    <!-- 3. Dodaj @media (max-width: 500px) zeby featured nie spanowalo -->
25</body>
26</html>