Wykorzystanie zmiennych, Grid i Flex

Wykorzystanie zmiennych, Grid i Flex

W tej lekcji nauczysz się, jak praktycznie wykorzystywać zmienne CSS, Flexbox i Grid Layout w realnym projekcie.
To fundamenty nowoczesnego frontendu – łącząc je z podejściem komponentowym, tworzysz elastyczne, skalowalne i czytelne układy.

1. Zmienne CSS – fundament stylów

Stosuj zmienne do wszystkiego, co może się powtarzać: kolorów, odstępów, fontów, promieni i cieni.

:root {
  --color-primary: #0d6efd;
  --color-bg: #f8f9fa;
  --color-text: #212529;
  --font-base: 1rem;
  --font-lg: 1.5rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --radius: 0.5rem;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

Dlaczego warto?

• Wystarczy zmienić wartość w jednym miejscu, by zaktualizować cały projekt
• Zachowujesz spójność – fonty, kolory i spacing są zawsze takie same
• Kod CSS jest krótszy, czytelniejszy i bardziej zorganizowany

2. Flexbox – elastyczne komponenty

Flex jest idealny do osi poziomej i wyrównywania treści. Przykład: header, karty z ikoną, lista przycisków.

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

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

.flex-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

Przykład w HTML:

<div class="card flex-column">
  <img src="icon.svg" alt="" class="card__icon">
  <h3 class="card__title">Usługa</h3>
  <p class="card__text">Opis usługi...</p>
</div>

3. Grid – struktura całej sekcji

Grid sprawdza się, gdy chcesz mieć kontrolę nad układem w dwóch wymiarach.
Przykład: sekcja z 2–4 kolumnami, które automatycznie dostosowują się do rozmiaru ekranu.

.grid-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
}

<section class="features grid-responsive">
  <div class="feature">Funkcja 1</div>
  <div class="feature">Funkcja 2</div>
  <div class="feature">Funkcja 3</div>
</section>

Dzięki Gridowi uzyskasz responsywną siatkę bez potrzeby używania Media Queries.

4. Łączenie Flex + Grid + zmiennych

Najczęściej łączysz Grid (do głównego układu sekcji) z Flexem (do elementów wewnętrznych):

<section class="team grid-responsive">
  <article class="card flex-column">
    <img src="avatar.jpg" class="card__avatar">
    <h3>Anna</h3>
    <p>UX Designer</p>
  </article>
</section>

5. Dobre praktyki

• Zawsze używaj zmiennych w komponentach – nie wpisuj wartości „na sztywno”
• Twórz klasy pomocnicze jak .grid-responsive, .flex-center, .mt-md
• Nie mieszaj zbyt wielu stylów w jednej klasie – rozdzielaj odpowiedzialności
• Testuj układ w różnych rozdzielczościach – Grid i Flex pomagają osiągnąć responsywność

Ćwiczenie

Na podstawie Twojej makiety:

• stwórz siatkę z Grid dla sekcji z ofertą lub członkami zespołu,
• wewnątrz każdej karty użyj Flex do ułożenia zawartości pionowo,
• zastosuj zmienne do spacingu, kolorów i promieni,
• zastosuj klasy pomocnicze, by uprościć kod.

Wniosek

Zmienne + Flex + Grid = nowoczesny CSS, który działa.
Dzięki ich połączeniu możesz budować interfejsy, które są elastyczne, estetyczne i łatwe do utrzymania.
To podejście, które stosuje się w realnych projektach frontendowych – i teraz Ty też możesz je wdrożyć.