Zastosowanie grid-template-columns i grid-template-rows

Zastosowanie grid-template-columns i grid-template-rows

Po poznaniu podstaw definiowania kolumn i wierszy, czas na praktyczne zastosowanie dwóch najważniejszych właściwości CSS Grid: grid-template-columns i grid-template-rows. Dzięki nim możemy tworzyć elastyczne, estetyczne i funkcjonalne siatki – dostosowane do różnych potrzeb.

1. Powtarzanie kolumn – funkcja repeat()

Zamiast powtarzać wartości ręcznie, możesz użyć funkcji repeat(), np.:

grid-template-columns: repeat(3, 1fr);

Efekt działania: tworzy 3 kolumny o tej samej szerokości (każda po 1fr). To samo co 1fr 1fr 1fr, ale krócej i czytelniej.

To bardzo wygodne, szczególnie przy większych liczbach kolumn, np. repeat(12, 1fr) dla układu typu grid 12-kolumnowego.

2. Mieszanie jednostek

Możesz łatwo mieszać jednostki – np. kolumna o stałej szerokości i elastyczne obok:

grid-template-columns: 200px 1fr 2fr;

Efekt działania: pierwsza kolumna zawsze ma 200px, druga zajmuje 1 część pozostałej przestrzeni, trzecia 2 części.

3. Automatyczna liczba wierszy

Możesz ustawić, by siatka sama dopasowywała ilość wierszy do zawartości:

grid-template-rows: auto auto auto;

Efekt działania: trzy wiersze – ich wysokość będzie zależeć od zawartości.

4. Elastyczne wiersze i kolumny – minmax()

Chcesz, by kolumna miała minimalną i maksymalną szerokość? Użyj minmax():

grid-template-columns: repeat(3, minmax(150px, 1fr));

Efekt działania: każda kolumna ma min. 150px, ale może rosnąć do 1fr, gdy jest miejsce.

Świetne do budowania responsywnych układów, np. galerii zdjęć lub list produktów.

5. Automatyczne dopasowanie – auto-fit i auto-fill

To techniki, które pozwalają tworzyć dynamiczne siatki, które same dostosowują liczbę kolumn do szerokości okna.

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Efekt działania: siatka tworzy tyle kolumn o szerokości min. 200px, ile się zmieści. Pozostałe kolumny się „składają”.

Użyteczne np. w responsywnych galeriach, sekcjach z kartami, layoutach typu dashboard.

Ćwiczenie – siatka z kartami o minimalnej szerokości

Stwórz siatkę, która automatycznie dopasowuje liczbę kolumn do szerokości ekranu. Każda kolumna powinna mieć min. 250px. Ustaw odstęp 20px między elementami.

👉 Otwórz JSFiddle i przetestuj

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}
.grid-item {
  background: #ffe082;
  padding: 30px;
  text-align: center;
  font-weight: bold;
}
</style>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>

Zmniejsz i zwiększ szerokość okna przeglądarki – zauważ, jak siatka dynamicznie dopasowuje liczbę kolumn. To właśnie siła CSS Grid!

W kolejnych lekcjach dowiesz się, jak pozycjonować konkretne elementy w siatce – niezależnie od ich kolejności – i jak tworzyć tzw. grid areas.