Nieresponsywna
Stała szerokość 1200px. Na małych ekranach powoduje ucięcie treści i suwak poziomy.
Responsywna
Dopasowuje się automatycznie do każdej szerokości ekranu dzięki CSS Grid.
Analiza Różnic Implementacyjnych i Komendy CSS
Wersja Nieresponsywna (Tradycyjne podejście)
Opiera się na sztywnych wartościach w pikselach (`px`) oraz pozycjonowaniu bezwzględnym i floatach.
- Sztywne szerokości (`width: 1200px`) Komponenty posiadają zadeklarowaną stałą szerokość. Jeśli ekran użytkownika jest węższy niż 1200px, przeglądarka wymusza poziomy pasek przewijania.
- Pozycjonowanie bezwzględne (`position: absolute`) Elementy takie jak logo i nawigacja są "przypięte" współrzędnymi `left` i `top` do rodzica, przez co na mniejszych ekranach nakładają się na siebie.
- Układ blokowy przez `float: left` Kafelki galerii ustawiane są za pomocą floatów i stałej szerokości (`width: 360px`). Wymaga to sztucznego czyszczenia (tzw. *clearfix*), a liczba kafelków w rzędzie jest sztywno zależna od szerokości kontenera, a nie od rozmiaru urządzenia.
Wersja Responsywna (Nowoczesny standard)
Wykorzystuje elastyczne modele układu, jednostki procentowe/względne oraz zapytania o media.
- CSS Grid & Flexbox (`display: grid / flex`) Zamiast floatów zastosowano `display: flex` z właściwością `gap` dla nawigacji oraz `display: grid` z funkcją `grid-template-columns: repeat(3, minmax(0, 1fr))` dla galerii. Układ sam decyduje o liczbie kolumn.
- Media Queries (`@media (min-width: ... )`) Pozwalają dynamicznie modyfikować reguły CSS w zależności od szerokości ekranu urządzenia. W kodzie zastosowano punkty kontrolne (breakpointy) dla tabletów (`640px`) i komputerów (`1024px`).
- Jednostki względne i elastyczność (`max-width: 100%`) Obrazki posiadają `width: 100%` oraz `object-fit: cover`, co gwarantuje, że skalują się proporcjonalnie do dostępnej przestrzeni wewnątrz karty, zapobiegając wychodzeniu poza krawędzie ekranu.