Ustawianie kolumn i wierszy

Ustawianie kolumn i wierszy

Gdy aktywujesz siatkę CSS Grid za pomocą display: grid, możesz określić, ile kolumn i wierszy ma mieć Twoja siatka oraz jak szerokie i wysokie mają być te „komórki”. Do tego służą dwie właściwości:

• grid-template-columns – ustala liczbę i szerokość kolumn,
• grid-template-rows – ustala liczbę i wysokość wierszy.

Tworzenie kolumn – przykład podstawowy

Jeśli chcesz stworzyć trzy kolumny o równej szerokości, możesz napisać:

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

Efekt działania: trzy kolumny o równej szerokości, zajmujące całą dostępną przestrzeń.

Co oznacza jednostka fr?

fr oznacza „jednostkę ułamkową” – czyli część dostępnej przestrzeni. Przykład:

• 1fr 1fr – dwie kolumny po 50%,
• 2fr 1fr – pierwsza kolumna 2x szersza niż druga.

To najczęściej używana jednostka w Gridzie – daje pełną elastyczność bez ręcznego liczenia procentów.

Użycie wartości stałych

Możesz też ustawić kolumny na konkretną szerokość – np. 200px:

grid-template-columns: 200px 1fr;

Efekt działania: pierwsza kolumna zawsze ma 200px, druga wypełnia resztę.

Ustawianie wierszy

Podobnie możesz ustawić wysokości wierszy – np.:

grid-template-rows: 100px 200px auto;

Efekt działania: pierwszy wiersz ma 100px, drugi 200px, trzeci dostosowuje się do zawartości.

Dodanie odstępów – gap

CSS Grid pozwala też łatwo ustawić odstępy między kolumnami i wierszami. Zamiast marginesów używa się tu właściwości gap:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

Efekt działania: pomiędzy wszystkimi komórkami pojawi się 20px odstępu – w pionie i poziomie.

Ćwiczenie – stwórz prostą siatkę

W JSFiddle stwórz siatkę 3×2 – trzy kolumny i dwa wiersze. Ustaw kolumny na 1fr, wiersze na 150px. Dodaj odstęp 15px między komórkami.

👉 Przetestuj w JSFiddle

<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 150px 150px;
  gap: 15px;
  background: #f0f0f0;
  padding: 10px;
}
.grid-container div {
  background: #b3e5fc;
  text-align: center;
  padding: 20px;
  font-weight: bold;
}
</style>

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

Przetestuj różne wartości kolumn i wierszy. Spróbuj ustawić jedną kolumnę na 200px, a pozostałe na 1fr, by zobaczyć, jak działa mieszanie jednostek.

W kolejnej lekcji poznasz więcej praktycznych zastosowań właściwości grid-template-columns i grid-template-rows – w tym automatyczne układy, skróty i nowoczesne techniki.