CSS Grid w praktyce: galerie, dashboardy i układy kart

Cele lekcji

Po ukończeniu tej lekcji będziesz umieć:

• budować responsywne siatki kart bez pisania wielu breakpointów,
• użyć repeat(), minmax(), auto-fit i auto-fill,
• rozmieścić wybrany element na większej części siatki przez grid-column i grid-row,
• zaprojektować prosty układ dashboardu z kartą główną i kartami pomocniczymi,
• rozpoznać, kiedy Grid upraszcza layout bardziej niż Flexbox.

Kontekst praktyczny

Grid jest bardzo mocny w sekcjach, które mają wiele podobnych elementów i muszą dobrze działać na różnych szerokościach ekranu. Przykłady z realnych projektów to galerie produktów, listy lekcji, karty funkcji, sekcje cennika i dashboardy z danymi.

Krótka powtórka Grida

Podstawowy Grid opisuje siatkę na rodzicu. Dzieci automatycznie trafiają do kolejnych komórek.

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

Ten układ jest czytelny, ale nadal zakłada konkretną liczbę kolumn. W praktyce często chcesz, aby liczba kolumn wynikała z dostępnej szerokości.

Responsywne siatki bez wielu breakpointów

Zamiast pisać osobne reguły dla telefonu, tabletu i desktopu, możesz powiedzieć przeglądarce: twórz tyle kolumn, ile się zmieści, ale nie pozwól karcie spaść poniżej sensownej szerokości.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

To jeden z najważniejszych praktycznych wzorców CSS Grid. Karta ma minimum 14rem, a gdy jest więcej miejsca, kolumny rosną równo.

auto-fit

auto-fit tworzy tyle kolumn, ile może zmieścić kontener, a puste tory siatki zapadają się. Dzięki temu istniejące karty mogą rozciągnąć się i wykorzystać wolne miejsce.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
}

To dobry domyślny wybór dla galerii kart, gdy nie chcesz zostawiać pustych kolumn na końcu wiersza.

auto-fill

auto-fill również tworzy tyle kolumn, ile zmieści kontener, ale zachowuje puste tory siatki. To bywa przydatne, gdy zależy Ci na stałym rytmie kolumn, nawet jeśli elementów jest mniej.

.reserved-track-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 1rem;
}

Na początku częściej użyjesz auto-fit, bo daje bardziej intuicyjny efekt dla zwykłych list kart. auto-fill warto znać, gdy projekt wymaga zachowania pustego miejsca w siatce.

auto-fit kontra auto-fill

Najprostsze rozróżnienie: auto-fit dopasowuje istniejące elementy do dostępnego miejsca, a auto-fill pilnuje potencjalnych kolumn, nawet jeśli część z nich jest pusta.

• Wybierz auto-fit, gdy karty mają naturalnie wypełnić dostępny wiersz.
• Wybierz auto-fill, gdy chcesz zachować rytm siatki z miejscem na kolejne elementy.
• W obu przypadkach najczęściej połączysz je z minmax().

Galeria kart

Poniższy przykład buduje galerię lekcji, która zmienia liczbę kolumn bez dodatkowego breakpointu.

Kopiuj<section class="course-gallery">
  <article class="course-card">
    <p>Lekcja 10</p>
    <h2>Grid w praktyce</h2>
    <p>Responsywne galerie, karty i dashboardy.</p>
  </article>
  <article class="course-card">
    <p>UI</p>
    <h2>Galeria kart</h2>
    <p>Karty same dobierają liczbę kolumn.</p>
  </article>
  <article class="course-card">
    <p>Layout</p>
    <h2>Dashboard</h2>
    <p>Jedna karta może zajmować większy obszar.</p>
  </article>
</section>

.course-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

Rozmieszczanie elementów na siatce

Grid pozwala nie tylko tworzyć równe karty, ale też wskazać, że konkretny element ma zająć większy obszar. Do tego służą między innymi grid-column i grid-row.

.dashboard-card--main {
  grid-column: span 2;
  grid-row: span 2;
}

Ten zapis mówi: karta główna ma zająć dwie kolumny i dwa wiersze. To częsty wzorzec w dashboardach, gdzie najważniejszy panel jest większy od pozostałych.

Podstawy layoutu dashboardu

Dashboard zwykle łączy kartę główną, kilka mniejszych metryk i dodatkowe panele. Grid dobrze opisuje taki układ, bo możesz kontrolować całą strukturę sekcji na rodzicu.

Kopiuj<section class="dashboard-grid">
  <article class="dashboard-card dashboard-card--main">
    <h2>Postęp kursu</h2>
    <p>Najważniejsza karta zajmuje więcej miejsca.</p>
  </article>
  <article class="dashboard-card">Lekcje: 10</article>
  <article class="dashboard-card">Ćwiczenia: 24</article>
  <article class="dashboard-card">Moduł: Layout</article>
</section>

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
}

@media (min-width: 760px) {
  .dashboard-card--main {
    grid-column: span 2;
    grid-row: span 2;
  }
}

Interpretacja: na szerokim ekranie karta główna wyróżnia się rozmiarem. Na węższym ekranie układ może wrócić do prostych, pojedynczych kart bez poziomego przewijania.

Najczęstsze błędy początkujących

• Dodawanie wielu breakpointów do zwykłej galerii, gdy wystarczyłoby auto-fit i minmax().
• Używanie zbyt dużego minimum w minmax(), przez co karta nie mieści się na telefonie.
• Rozciąganie ważnej karty przez grid-column bez sprawdzenia, jak działa to na małym ekranie.
• Mylenie auto-fit i auto-fill bez sprawdzenia efektu w przeglądarce.
• Próba używania Grida do wszystkiego. Wewnątrz pojedynczej karty Flexbox często nadal jest prostszy.

Mini zadanie

Stwórz responsywną sekcję dashboardu z kartą główną i kartami pomocniczymi.

• Utwórz sekcję z czterema kartami: jedną główną i trzema pomocniczymi.
• Na rodzicu ustaw display: grid, gap i grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)).
• Na większym ekranie pozwól karcie głównej zająć więcej miejsca przez grid-column: span 2.
• Sprawdź układ na wąskim ekranie i upewnij się, że nie ma poziomego scrolla.
• Porównaj wersję z auto-fit i auto-fill, aby zobaczyć różnicę w zachowaniu pustych torów siatki.

Checklista

• Potrafię zbudować responsywną siatkę przez repeat(auto-fit, minmax(14rem, 1fr)).
• Rozumiem praktyczną różnicę między auto-fit i auto-fill.
• Wiem, że minimalna wartość w minmax() musi pasować do małego ekranu.
• Umiem wyróżnić kartę główną przez grid-column lub grid-row.
• Potrafię sprawdzić, czy dashboard nie tworzy poziomego przewijania.
• Wiem, kiedy Grid układa sekcję, a Flexbox porządkuje wnętrze pojedynczej karty.

Podsumowanie lekcji

Umiesz już używać CSS Grid w praktycznych układach: galeriach, sekcjach kart i prostych dashboardach. Poznałeś auto-fit, auto-fill, mocniejszy wzorzec minmax() oraz podstawowe rozmieszczanie elementów na siatce.

Kolejny krok w module layoutu to pozycjonowanie, czyli kontrolowanie elementów przez relative, absolute, fixed i sticky.