Kurs HTML

Wprowadzenie

Oprócz jednostek relatywnych i elastycznych obrazów, kluczowym elementem tworzenia responsywnych stron jest wybór odpowiedniej **techniki budowania layoutu**. Nowoczesne CSS oferuje dwie potężne metody, które doskonale sprawdzają się w RWD: **Flexbox** i **CSS Grid Layout**.

Obie te techniki są z natury elastyczne i pozwalają tworzyć układy, które łatwo adaptują się do zmian rozmiaru kontenera, co w połączeniu z Media Queries daje pełną kontrolę nad responsywnością.

Flexbox w RWD

Flexbox (Flexible Box Layout) jest idealny do tworzenia **jednowymiarowych** układów (wierszy lub kolumn) i dystrybucji przestrzeni między elementami w tym wymiarze. W kontekście RWD, Flexbox jest często używany do:

• Tworzenia elastycznych komponentów: Nawigacje, paski boczne, karty, grupy przycisków, gdzie elementy muszą się płynnie układać obok siebie lub pod sobą.
• Wyrównywania elementów: Łatwe centrowanie, wyrównywanie do krawędzi, rozkładanie przestrzeni (justify-content, align-items).
• Zmiany kolejności elementów: Właściwość order pozwala wizualnie zmienić kolejność elementów bez zmiany struktury HTML, co bywa przydatne na różnych rozmiarach ekranów.
• Zawijania elementów: Właściwość flex-wrap: wrap; pozwala elementom Flex przenosić się do następnego wiersza/kolumny, gdy brakuje miejsca w kontenerze.

Przykład: Responsywna nawigacja

<nav class="main-nav">
  <a href="#">Home</a>
  <a href="#">O nas</a>
  <a href="#">Usługi</a>
  <a href="#">Kontakt</a>
</nav>Kopiuj

.main-nav {
  display: flex;
  flex-wrap: wrap; /* Pozwól linkom się zawijać */
  justify-content: center; /* Wyśrodkuj linki domyślnie */
  background-color: #eee;
  padding: 10px;
}

.main-nav a {
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
}

/* Na większych ekranach wyrównaj do lewej */
@media screen and (min-width: 768px) {
  .main-nav {
    flex-wrap: nowrap; /* Zapobiegaj zawijaniu */
    justify-content: flex-start; /* Wyrównaj do lewej */
  }
}
Kopiuj

Na małych ekranach linki będą się zawijać i centrować. Na ekranach szerszych niż 768px, ułożą się w jednym rzędzie, wyrównane do lewej.

CSS Grid Layout w RWD

CSS Grid Layout jest stworzony do budowania **dwuwymiarowych** układów (wierszy i kolumn jednocześnie). Jest to idealne narzędzie do definiowania głównego szkieletu strony oraz bardziej złożonych siatek komponentów.

W kontekście RWD, Grid oferuje m.in.:

• Definiowanie elastycznych siatek: Użycie jednostki fr pozwala tworzyć kolumny i wiersze, które proporcjonalnie dzielą dostępną przestrzeń.
• Responsywne kolumny: Funkcja repeat(auto-fit, minmax(min_width, 1fr)) automatycznie dostosowuje liczbę kolumn do dostępnej szerokości.
• Łatwa zmiana układu za pomocą grid-template-areas: Media Queries mogą całkowicie redefiniować układ strony poprzez zmianę mapy obszarów.
• Kontrola nad umiejscowieniem: Precyzyjne umieszczanie elementów w siatce za pomocą linii lub nazwanych obszarów.
• Automatyczne umieszczanie z dense: Wypełnianie luk w siatce, co jest przydatne w galeriach.

Przykład: Responsywna siatka kart

<div class="card-container">
  <div class="card">Karta 1</div>
  <div class="card">Karta 2</div>
  <div class="card">Karta 3</div>
  <div class="card">Karta 4</div>
  <div class="card">Karta 5</div>
  <div class="card">Karta 6</div>
</div>Kopiuj

.card-container {
  display: grid;
  /* Utwórz tyle kolumn, ile się zmieści, każda min. 250px, maks. 1fr */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  border: 1px solid #ccc;
  padding: 20px;
  background-color: #f9f9f9;
}
Kopiuj

Ten prosty kod tworzy siatkę kart, która automatycznie dostosowuje liczbę kolumn. Na szerokim ekranie może być 3 lub 4 kolumny, na tablecie 2, a na telefonie 1 kolumna, bez potrzeby pisania dodatkowych Media Queries dla samej liczby kolumn!

Kiedy Flexbox, a kiedy Grid?

Często pojawia się pytanie, której techniki użyć. Ogólna zasada (choć nie jest sztywna):

• Flexbox jest lepszy dla układów **jednowymiarowych** (elementy w rzędzie LUB kolumnie) i dystrybucji przestrzeni w tym wymiarze. Świetnie nadaje się do komponentów interfejsu.
• Grid jest lepszy dla układów **dwuwymiarowych** (jednoczesne zarządzanie wierszami I kolumnami). Idealny do ogólnego layoutu strony i złożonych siatek.

Najlepsze rezultaty często osiąga się, **łącząc obie techniki**. Można użyć Grid do zdefiniowania głównych obszarów strony, a następnie Flexbox do ułożenia elementów wewnątrz tych obszarów (np. Flexbox do nawigacji wewnątrz headera zdefiniowanego przez Grid).