Kurs HTML

Definiowanie przestrzeni między ścieżkami (Rynny/Gutters)

Po zdefiniowaniu kolumn i wierszy siatki za pomocą grid-template-columns i grid-template-rows, często chcemy dodać przestrzeń **między** tymi ścieżkami, aby elementy siatki nie stykały się ze sobą. Te przestrzenie nazywane są **rynienkami** (gutters) lub po prostu odstępami.

CSS Grid Layout dostarcza dedykowanych właściwości do kontrolowania tych odstępów, stosowanych do **kontenera Grid**:

• grid-column-gap: Definiuje rozmiar odstępu (rynny) **między kolumnami**.
• grid-row-gap: Definiuje rozmiar odstępu (rynny) **między wierszami**.
• grid-gap (lub nowsza, preferowana nazwa gap): Skrócona właściwość do jednoczesnego ustawienia odstępów między wierszami i kolumnami.

Ważna uwaga: W nowszych specyfikacjach CSS nazwy tych właściwości zostały ujednolicone i uproszczone. Obecnie zaleca się używanie:

• column-gap zamiast grid-column-gap
• row-gap zamiast grid-row-gap
• gap zamiast grid-gap

Te nowsze nazwy działają zarówno w Grid Layout, jak i we Flexboxie (dla odstępów między elementami flex w kontenerach wieloliniowych). Przeglądarki nadal wspierają stare nazwy (grid-*) dla kompatybilności wstecznej, ale w nowym kodzie lepiej używać column-gap, row-gap i gap.

column-gap (dawniej grid-column-gap)

Ustawia rozmiar odstępu wyłącznie między kolumnami siatki. Przyjmuje wartość długości (np. px, em, %).

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 20px; /* Odstęp 20px tylko między kolumnami */
  /* grid-row-gap: 0; (domyślnie) */
}

Odstęp pojawi się tylko między kolumną 1 a 2 oraz między kolumną 2 a 3. Nie będzie odstępu przed pierwszą ani za ostatnią kolumną.

row-gap (dawniej grid-row-gap)

Ustawia rozmiar odstępu wyłącznie między wierszami siatki. Przyjmuje wartość długości (np. px, em, %).

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  row-gap: 1em; /* Odstęp 1em tylko między wierszami */
  /* column-gap: 0; (domyślnie) */
}

Odstęp pojawi się tylko między wierszem 1 a 2. Nie będzie odstępu nad pierwszym ani pod ostatnim wierszem.

gap (dawniej grid-gap) - Skrót

Jest to skrócona właściwość, która pozwala ustawić row-gap i column-gap jednocześnie.

• Jedna wartość: Jeśli podasz jedną wartość (np. gap: 15px;), zostanie ona zastosowana zarówno do row-gap, jak i column-gap.
• Dwie wartości: Jeśli podasz dwie wartości (np. gap: 10px 20px;), pierwsza wartość ustawia row-gap (odstęp między wierszami), a druga wartość ustawia column-gap (odstęp między kolumnami).

/* Odstęp 15px między wierszami ORAZ między kolumnami */
.container-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 15px; 
}

/* Odstęp 10px między wierszami i 20px między kolumnami */
.container-2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px 20px; 
}

Używanie skrótu gap jest zazwyczaj bardziej zwięzłe i czytelne.

Wizualizacja odstępów

Poniższy przykład pokazuje siatkę 2x2 z odstępami zdefiniowanymi za pomocą gap:

<div class="gap-example">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

.gap-example {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 80px 80px;
  gap: 10px 20px; /* 10px między wierszami, 20px między kolumnami */
  border: 1px solid black;
  padding: 10px; /* Padding kontenera, nie mylić z gap */
  background-color: #f0f0f0; /* Tło kontenera, aby było widać odstępy */
}

.gap-example .item {
  background-color: lightcoral;
  border: 1px solid darkred;
  display: flex; /* Dla wyśrodkowania tekstu */
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
}

Efekt wizualny:

Zwróć uwagę, że odstępy (szare tło kontenera) pojawiają się tylko **między** elementami siatki, a nie na krawędziach kontenera.