Lekcja: Organizacja layoutu za pomocą float, flexbox i grid

---

Cel lekcji

Nauczysz się organizować układ strony internetowej przy użyciu trzech popularnych metod:

1. Float
2. Flexbox
3. CSS Grid

Zrozumiesz ich różnice, zastosowania oraz nauczysz się tworzyć elastyczne i przejrzyste układy.

---

Część teoretyczna

Float

Float to starsza metoda układania elementów na stronie, polegająca na „unoszeniu” elementów w prawo lub lewo w obrębie ich kontenera.

Przykład użycia:

.container {
  width: 100%;
}
.box {
  float: left; /* lub right */
  width: 50%;
  height: 100px;
  background-color: lightblue;
}

Problemy z float:

• Elementy po float mogą „wypływać” z rodzica, co wymaga użycia technik „czyszczenia” (clear: both).

Atrybuty do zapamiętania:

• float (wartości: left, right, none)
• clear (wartości: left, right, both, none)

---

Flexbox

Flexbox to nowoczesna metoda układu elementów, skupiająca się na jednym wymiarze – poziomym lub pionowym. Pozwala na łatwe rozmieszczanie, wyrównywanie i rozciąganie elementów w kontenerze.

Najważniejsze właściwości:

• Na kontenerze:

  • display: flex;
  • flex-direction (wartości: row, row-reverse, column, column-reverse)
  • justify-content (wartości: flex-start, center, space-between, space-around, space-evenly)
  • align-items (wartości: stretch, center, flex-start, flex-end, baseline)
  • flex-wrap (wartości: nowrap, wrap, wrap-reverse)

• Na elementach wewnętrznych:

  • flex (wartości: liczby określające proporcje np. 1, 2)
  • align-self (wartości: jak align-items)

Przykład użycia:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.box {
  flex: 1; /* Każde dziecko zajmie równą część dostępnej przestrzeni */
  height: 100px;
  background-color: lightcoral;
}

---

CSS Grid

Grid umożliwia budowanie layoutów w dwóch wymiarach – wierszy i kolumn – z precyzyjnym określeniem ich układu.

Najważniejsze właściwości:

• Na kontenerze:

  • display: grid;
  • grid-template-columns (np. 1fr 2fr, repeat(3, 1fr))
  • grid-template-rows (np. 100px auto 50px)
  • gap (np. 10px, row-gap, column-gap)

• Na elementach wewnętrznych:

  • grid-column (np. 1 / 3)
  • grid-row (np. 1 / 2)

Przykład użycia:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Trzy kolumny */
  grid-template-rows: auto 100px;
  gap: 10px;
}
.box {
  background-color: lightgreen;
}

---

Ćwiczenia praktyczne

Ćwiczenia z Float

Ćwiczenie 1: Wstęp do float
Stwórz dwa prostokątne elementy obok siebie w jednym wierszu.

• Lewy element (niebieski) ma zajmować 30% szerokości kontenera.
• Prawy element (czerwony) ma zajmować 70%.

Ćwiczenie 2: Layout strony z Float
Stwórz stronę o układzie:

• Nagłówek (u góry, szerokość 100%)
• Część główna (podzielona na dwie kolumny):
  • Lewa kolumna (40% szerokości) zawiera dwa divy o różnych wysokościach.
  • Prawa kolumna (60% szerokości) jest jednym divem.
• Użyj clear na odpowiednich elementach.

---

Ćwiczenia z Flexbox

Ćwiczenie 3: Wyrównanie elementów
Stwórz poziomy układ trzech elementów (zielony, żółty, fioletowy):

• Każdy z elementów powinien mieć 20% szerokości kontenera.
• Wyśrodkuj elementy zarówno poziomo, jak i pionowo.
• Między elementami dodaj równą ilość miejsca.

Ćwiczenie 4: Layout strony z Flexbox
Zbuduj layout:

• Nagłówek (zawiera tytuł i menu nawigacyjne z trzema linkami wyśrodkowanymi w poziomie).
• Część główna (układ pionowy, w którym dwa divy zajmują po 50% wysokości).
• Ustaw przestrzeń między elementami przy pomocy justify-content.

---

Ćwiczenia z CSS Grid

Ćwiczenie 5: Prosty grid
Stwórz układ czterech kwadratowych elementów (100x100px) w dwóch rzędach i dwóch kolumnach.

• Dodaj przestrzeń 10px między nimi.

Ćwiczenie 6: Layout strony z Grid
Zaprojektuj layout strony z trzema sekcjami:

• Nagłówek zajmuje całą szerokość.
• Część główna dzieli się na dwie kolumny (70% i 30% szerokości).
• Stopka zajmuje całą szerokość.
• Użyj grid-template-areas do opisania układu.

---

Dodatkowe ćwiczenia

Ćwiczenie 7: Kombinacja Float i Flexbox
Stwórz układ, w którym:

• Nagłówek wykorzystuje Flexbox do rozmieszczenia logo, nawigacji i przycisku wyszukiwania.
• Główna część zawiera dwa elementy umieszczone obok siebie przy pomocy float.

Ćwiczenie 8: Zaawansowany Grid Layout
Stwórz stronę z układem Grid, w którym:

• Nagłówek zajmuje jedną kolumnę na szerokość całej strony.
• Część główna ma dwie kolumny (60% i 40% szerokości) oraz trzy rzędy.
• Stopka zajmuje jedną kolumnę w dolnym rzędzie.
• Wyrównaj elementy wewnątrz siatki.

---

Linki do dokumentacji W3C:

• Float
• Flexbox
• Grid

Używaj linków, by sprawdzać szczegóły dotyczące każdej właściwości i jej zastosowania.