Funkcja CSS repeat()

Funkcja CSS repeat() służy do zwięzłego definiowania list ścieżek siatki w układach siatkowych CSS Grid. Pozwala znacznie skrócić kod, kiedy trzeba utworzyć dużą liczbę wierszy lub kolumn siatki za pomocą własności grid-template-columns i grid-template-rows, np.:

grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px;

Tę długą deklarację dzięki funkcji CSS repeat() można skrócić do następującej postaci:

grid-template-columns: repeat(9, 100px);

Wartości i składnia

Funkcja repeat() jako wartość przyjmuje dwa argumenty: liczbę powtórzeń i definicje ścieżek siatki do powtórzenia.

Liczba powtórzeń

Słowo kluczowe auto-fill

Słowo kluczowe auto-fill tworzy maksymalną liczbę kolumn lub wierszy siatki, jaka zmieści się w określonym wymiarze kontenera siatki, np.:

.grid-container {
  display: grid;
  width: 600px;
  grid-template-columns: repeat(auto-fill, 120px);
  grid-template-rows: 80px;
}

Ta reguła utworzy pięć równych kolumn siatki, ponieważ tylko zmieści się 120-pikselowych elementów w przestrzeni o szerokości 600 pikseli. Tę regułę można zastosować do poniższego kontenera:

<section class="grid-container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</section>

Efekt tego będzie następujący:

Słowo kluczowe auto-fit

Słowo kluczowe auto-fit tworzy tyle kolumn lub wierszy siatki, ile jest potrzebnych do pomieszczenia wszystkich jednostek siatki znajdujących się w kontenerze siatki, np.:

.grid-container {
  display: grid;
  width: 600px;
  grid-template-columns: repeat(auto-fit, 120px);
  grid-template-rows: 80px;
}

Ta reguła jest prawie identyczna z poprzednią, tylko w funkcji repeat() zamiast słowa kluczowego auto-fill zostało użyte słowo kluczowe auto-fit. W efekcie dla tego samego kontenera section, co w poprzednim przykładzie, przeglądarka utworzy tylko trzy kolumny siatki, ponieważ kontener zawiera tylko trzy jednostki siatki:

Definicje ścieżek siatki

Drugim argumentem funkcji CSS repeat() może być dowolna lista definicji ścieżek siatki, włącznie z nazwami linii itd. (takich, jakie normalnie przyjmuje własność grid-template-columns lub grid-template-rows). W większości przypadków określa się tylko rozmiar ścieżki w danym wymiarze, ale można stosować także bardziej rozbudowane konstrukcje, np.:

grid-template-columns: repeat(6, [początek-kolumny] 120px [koniec-kolumny]);

Ta deklaracja tworzy sześć kolumn, z których każda ma linię początkową o nazwie początek-kolumny i linię końcową o nazwie koniec-kolumny.