CSS Grid: kolumny, wiersze i odstępy

Cele lekcji

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

• wyjaśnić, czym CSS Grid różni się od Flexboxa,
• włączyć siatkę za pomocą display: grid,
• zdefiniować proste kolumny i wiersze,
• ustawić odstępy między komórkami siatki przez gap,
• użyć fr, repeat() i minmax() w prostym układzie kart.

Kontekst praktyczny

Grid pojawia się tam, gdzie layout ma wyraźne kolumny i wiersze: galerie, sekcje kart, cenniki, układy dashboardu, listy produktów i większe bloki strony głównej. Zamiast ręcznie pilnować szerokości każdej karty, opisujesz strukturę siatki na rodzicu.

Grid kontra Flexbox

Flexbox i Grid nie konkurują ze sobą w każdej sytuacji. To narzędzia do różnych problemów layoutu.

• Flexbox jest najlepszy, gdy najważniejszy jest jeden kierunek: rząd albo kolumna.
• Grid jest najlepszy, gdy chcesz kontrolować kolumny i wiersze jednocześnie.
• Flexbox często działa wewnątrz komponentu, a Grid często układa większą sekcję z wieloma kartami.

display: grid

Tak jak Flexbox zaczyna się od display: flex, Grid zaczyna się od display: grid. Element staje się kontenerem grid, a jego bezpośrednie dzieci trafiają do komórek siatki.

.lesson-grid {
  display: grid;
}

Samo display: grid nie wystarczy do ciekawego layoutu. Najczęściej od razu dopisujesz definicję kolumn oraz odstęp.

Kolumny: grid-template-columns

grid-template-columns opisuje, ile kolumn ma mieć siatka i jak szeroka jest każda z nich.

.lesson-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Ten przykład tworzy trzy równe kolumny. Każde bezpośrednie dziecko kontenera trafi do kolejnej komórki, a po zapełnieniu wiersza przeglądarka utworzy następny wiersz.

Wiersze: grid-template-rows

grid-template-rows działa podobnie, ale opisuje wysokości wierszy. W prostych listach kart często nie musisz go ustawiać, bo wysokość wiersza wynika z treści. Warto jednak wiedzieć, że taka kontrola istnieje.

.dashboard {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
}

auto oznacza, że wiersz dopasuje się do zawartości. Sztywne wysokości stosuj ostrożnie, bo mogą utrudnić responsywność i obciąć tekst.

Odstępy: gap

gap ustawia odstęp między kolumnami i wierszami siatki. To ten sam wygodny mechanizm, który znasz już z Flexboxa.

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

Użycie gap jest czytelniejsze niż dodawanie marginesów do każdej karty i usuwanie marginesu z ostatniego elementu w wierszu.

Jednostka fr

fr oznacza część dostępnej przestrzeni w siatce. Jeśli zapiszesz trzy kolumny jako 1fr 1fr 1fr, każda dostanie równą część wolnego miejsca.

.content-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

W tym przykładzie pierwsza kolumna dostaje dwie części przestrzeni, a druga jedną. To praktyczny wzorzec dla układu treść główna + panel boczny.

Funkcja repeat()

repeat() skraca powtarzalne definicje kolumn albo wierszy. Zamiast pisać 1fr 1fr 1fr, możesz zapisać to czytelniej.

.lesson-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Ten kod nadal tworzy trzy równe kolumny, ale jest łatwiejszy do edycji. Jeśli potrzebujesz czterech kolumn, zmieniasz tylko liczbę w repeat().

Funkcja minmax()

minmax() pozwala podać minimalny i maksymalny rozmiar kolumny lub wiersza. To ważny krok w stronę responsywnych siatek.

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

minmax(0, 1fr) mówi: kolumna może się zmniejszyć do zera, ale docelowo bierze jedną część dostępnej przestrzeni. W prostych kartach pomaga uniknąć sytuacji, w której zawartość niepotrzebnie rozpycha siatkę.

Przykład siatki sześciu kart

Poniższy przykład tworzy prostą siatkę sześciu kart w trzech równych kolumnach. To dobry pierwszy wzorzec dla galerii lekcji albo listy modułów.

Kopiuj<section class="module-grid">
  <article class="module-card">Lekcja 01</article>
  <article class="module-card">Lekcja 02</article>
  <article class="module-card">Lekcja 03</article>
  <article class="module-card">Lekcja 04</article>
  <article class="module-card">Lekcja 05</article>
  <article class="module-card">Lekcja 06</article>
</section>

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

.module-card {
  padding: 1rem;
  border: 1px solid #dbe2f1;
  border-radius: 12px;
  background-color: #ffffff;
}

Interpretacja: kontener tworzy trzy kolumny, a sześć kart automatycznie układa się w dwa wiersze. gap tworzy równy odstęp pionowy i poziomy między kartami.

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

• Ustawianie display: grid na każdej karcie zamiast na wspólnym rodzicu listy.
• Mylenie gap z marginesem pojedynczej karty.
• Tworzenie zbyt wielu sztywnych kolumn w pikselach, które nie mieszczą się na małym ekranie.
• Używanie Grida do bardzo prostego wyrównania ikony i tekstu, gdzie Flexbox byłby prostszy.
• Zakładanie, że grid-template-rows jest konieczne w każdej siatce. Przy kartach często wystarczą kolumny i naturalna wysokość treści.

Mini zadanie

Zbuduj prostą siatkę sześciu kart z równymi kolumnami.

• Utwórz sekcję z sześcioma elementami article.
• Na rodzicu ustaw display: grid.
• Dodaj trzy równe kolumny przez grid-template-columns: repeat(3, minmax(0, 1fr)).
• Ustaw gap, aby karty miały równy odstęp w pionie i poziomie.
• Ostyluj karty przez padding, border i jasne tło.

Na koniec zmień liczbę kolumn z trzech na dwie i sprawdź, jak przeglądarka automatycznie układa karty w kolejnych wierszach.

Checklista

• Wiem, kiedy Grid jest lepszym wyborem niż Flexbox.
• Potrafię wskazać kontener grid i jego bezpośrednie dzieci.
• Umiem zdefiniować trzy równe kolumny przez repeat(3, 1fr).
• Rozumiem, że gap działa między komórkami siatki.
• Wiem, do czego służy jednostka fr.
• Potrafię użyć minmax(0, 1fr) w podstawowej siatce kart.

Podsumowanie lekcji

Wiesz już, że CSS Grid pozwala układać elementy w kolumnach i wierszach. Potrafisz włączyć siatkę przez display: grid, zdefiniować kolumny, użyć gap, jednostki fr, funkcji repeat() i podstawowego minmax().

Kolejny krok to praktyczne użycie Grida w galeriach, dashboardach i responsywnych układach kart.