Kurs HTML

Tworzenie struktury siatki

Po aktywowaniu Grid Layout za pomocą display: grid lub inline-grid, następnym krokiem jest zdefiniowanie struktury siatki, czyli określenie, ile ma mieć kolumn i wierszy oraz jakie mają być ich rozmiary.

Służą do tego dwie podstawowe właściwości stosowane do **kontenera Grid**:

• grid-template-columns: Definiuje nazwy i rozmiary **kolumn** siatki.
• grid-template-rows: Definiuje nazwy i rozmiary **wierszy** siatki.

Wartościami tych właściwości są listy rozmiarów ścieżek (track sizes), oddzielone spacjami. Każda wartość na liście odpowiada jednej kolumnie (dla grid-template-columns) lub jednemu wierszowi (dla grid-template-rows).

Podstawowe jednostki rozmiaru ścieżek

Możemy używać różnych jednostek do określania rozmiarów kolumn i wierszy:

• Jednostki długości (np. px, em, rem): Definiują stały rozmiar ścieżki.

  .container {
    display: grid;
    grid-template-columns: 200px 100px 300px; /* Trzy kolumny o stałych szerokościach */
    grid-template-rows: 100px 50px; /* Dwa wiersze o stałych wysokościach */
  }
  Kopiuj

• Procenty (%): Definiują rozmiar ścieżki jako procent rozmiaru kontenera Grid.

  .container {
    display: grid;
    width: 600px; /* Kontener musi mieć zdefiniowany rozmiar dla % */
    grid-template-columns: 50% 25% 25%; /* 300px, 150px, 150px */
  }
  Kopiuj

• Słowo kluczowe auto: Rozmiar ścieżki jest określany na podstawie rozmiaru zawartości największego elementu w tej ścieżce. Ścieżka będzie tak szeroka/wysoka, jak potrzeba, aby zmieścić zawartość.

  .container {
    display: grid;
    grid-template-columns: 100px auto 100px; /* Środkowa kolumna dopasuje się do zawartości */
  }
  Kopiuj

Jednostka fr (Fraction Unit)

Jednostka fr jest specyficzna dla Grid Layout i reprezentuje **ułamek dostępnej przestrzeni** w kontenerze Grid.

Jest niezwykle użyteczna do tworzenia elastycznych układów, ponieważ pozwala rozdzielić pozostałą przestrzeń proporcjonalnie między ścieżkami.

• Przeglądarka najpierw przydziela przestrzeń dla ścieżek o stałych rozmiarach (px, em, auto, %).
• Następnie pozostała dostępna przestrzeń jest dzielona między ścieżki zdefiniowane za pomocą jednostki fr, proporcjonalnie do ich wartości fr.

.container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr; 
  /* 1. kolumna: 100px */
  /* Pozostała przestrzeń jest dzielona: */
  /* 2. kolumna: 1 część (1fr) */
  /* 3. kolumna: 2 części (2fr) */
}
Kopiuj

W powyższym przykładzie, jeśli kontener ma 700px szerokości, 100px jest zajęte przez pierwszą kolumnę. Pozostaje 600px. Ta przestrzeń jest dzielona na 1 + 2 = 3 części. Druga kolumna dostaje 1/3 * 600px = 200px, a trzecia 2/3 * 600px = 400px. Końcowe szerokości: 100px, 200px, 400px.

Równe kolumny:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Trzy równe, elastyczne kolumny */
}
Kopiuj

Funkcja repeat()

Funkcja repeat() pozwala na zwięzłe definiowanie powtarzających się wzorców ścieżek.

Składnia: repeat(<liczba powtórzeń>, <lista ścieżek>)

/* Zamiast: grid-template-columns: 1fr 1fr 1fr 1fr; */
grid-template-columns: repeat(4, 1fr); /* Cztery równe kolumny */

/* Zamiast: grid-template-columns: 100px 20px 100px 20px 100px 20px; */
grid-template-columns: repeat(3, 100px 20px); /* Powtórz wzorzec (100px 20px) trzy razy */

/* Można łączyć z innymi definicjami */
grid-template-columns: 50px repeat(2, 1fr auto) 50px;
Kopiuj

Można również użyć słów kluczowych auto-fill lub auto-fit zamiast liczby powtórzeń, aby automatycznie wypełnić kontener tyloma ścieżkami danego rozmiaru, ile się zmieści. Jest to przydatne w responsywnych układach.

.container {
  display: grid;
  /* Stwórz tyle kolumn o minimalnej szerokości 150px, ile się zmieści, */
  /* a pozostałą przestrzeń rozdziel równo między nimi (1fr) */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
}
Kopiuj

Funkcja minmax()

Funkcja minmax() pozwala zdefiniować zakres rozmiarów dla ścieżki - minimalny i maksymalny rozmiar.

Składnia: minmax(<min>, <max>)

• <min>: Minimalny rozmiar ścieżki.
• <max>: Maksymalny rozmiar ścieżki. Może to być również jednostka fr.

.container {
  display: grid;
  /* Pierwsza kolumna: min 100px, max 200px */
  /* Druga kolumna: min 150px, elastyczna (1fr), ale nie szersza niż 400px */
  /* Trzecia kolumna: min dopasowany do zawartości (auto), max elastyczny (1fr) */
  grid-template-columns: minmax(100px, 200px) minmax(150px, min(1fr, 400px)) minmax(auto, 1fr);
}
Kopiuj

minmax() jest często używane w połączeniu z repeat(auto-fit, ...) do tworzenia responsywnych siatek, które dostosowują liczbę kolumn do dostępnej przestrzeni, jednocześnie zapewniając, że kolumny nie staną się zbyt wąskie.