Funkcja CSSFunkcje i jednostki

repeat()

Powtarza wzór kolumn lub wierszy siatki. Z auto-fill lub auto-fit i minmax() tworzy responsywną siatkę bez media queries.

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Typowe wzorce
Typowe wzorce w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

.courses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
  gap: 10px;
}

HTML przykładu

<style>
  .course { padding: 12px; border: 1px solid #27272a; border-radius: 12px; background: #18181b; }
  .course span { display: block; color: #a1a1aa; font-size: 13px; }
</style>
<div class="courses">
  <div class="course"><strong>HTML i CSS</strong><span>Egipt</span></div>
  <div class="course"><strong>React</strong><span>Kosmos</span></div>
  <div class="course"><strong>JavaScript</strong><span>Park Jurajski</span></div>
  <div class="course"><strong>Next.js</strong><span>Przyszłość</span></div>
  <div class="course"><strong>Python</strong><span>Safari</span></div>
</div>

Podgląd

Siatka sama decyduje o liczbie kolumn: na komputerze mieści ich się więcej, na telefonie mniej. Nie ma tu ani jednego media query.

Definicja i zastosowanie

Funkcja repeat() skraca zapis ścieżek w siatce CSS Grid. Zamiast 1fr 1fr 1fr 1fr piszesz repeat(4, 1fr), a zamiast 100px 1fr 100px 1fr po prostu repeat(2, 100px 1fr). Działa w grid-template-columns i grid-template-rows, i można ją łączyć ze zwykłymi wartościami, np. 200px repeat(3, 1fr).

Zamiast liczby możesz wpisać auto-fill albo auto-fit. Przeglądarka sama policzy wtedy, ile kolumn zmieści się w kontenerze. W parze z minmax() daje to responsywną siatkę bez media queries: repeat(auto-fill, minmax(160px, 1fr)) tworzy tyle kolumn o szerokości co najmniej 160px, ile się zmieści, a nadmiar miejsca dzieli między nie po równo.

Funkcja minmax(MIN, MAKS) ustala przedział rozmiaru jednej ścieżki: kolumna nie będzie węższa niż MIN ani szersza niż MAKS. Jako maksimum często daje się 1fr, czyli równą część wolnego miejsca. Na bardzo wąskim ekranie minimum może być szersze niż cały kontener, dlatego bezpieczniej pisać minmax(min(160px, 100%), 1fr).

Różnica między auto-fill a auto-fit wychodzi, gdy elementów jest mało. auto-fill tworzy kolumny na zapas, nawet puste, więc elementy zachowują swój rozmiar. auto-fit zwija puste kolumny do zera i pozwala istniejącym elementom rozciągnąć się na całą szerokość. Przy wielu elementach obie wersje wyglądają tak samo.

Składnia

repeat(<liczba> | auto-fill | auto-fit, <rozmiar ścieżki>+)
minmax(<minimum>, <maksimum>)

Typowe wzorce

repeat(3, 1fr)
trzy równe kolumny
Trzy kolumny po równej części szerokości. Sześć kafelków układa się w dwa rzędy.
repeat(2, 60px 1fr)
powtarzany wzór
Powtarzać można cały wzór. Tu dwa razy para: wąska kolumna 60 px i szeroka 1fr, razem cztery kolumny.
repeat(3, minmax(50px, 90px))
kolumny od 50 do 90 px
Każda kolumna ma od 50 do 90 px. W szerokiej ramce zatrzymują się na 90 px, a po zwężeniu (przeciągnij prawy dolny róg) kurczą się, ale nie poniżej 50 px.
repeat(auto-fill, minmax(70px, 1fr))
kolumny na zapas
Przeglądarka tworzy tyle kolumn, ile się zmieści, nawet pustych. Dwa kafelki zajmują tylko część szerokości, a reszta zostaje wolna. Zwężaj ramkę, żeby zobaczyć, jak znikają kolejne kolumny.
repeat(auto-fit, minmax(70px, 1fr))
puste kolumny znikają
Puste kolumny zwijają się do zera, więc te same dwa kafelki rozciągają się na całą szerokość. Porównaj z auto-fill obok.

Zapis	Efekt	Opis
repeat(3, 1fr)	trzy równe kolumny	Trzy kolumny po równej części szerokości. Sześć kafelków układa się w dwa rzędy.
repeat(2, 60px 1fr)	powtarzany wzór	Powtarzać można cały wzór. Tu dwa razy para: wąska kolumna 60 px i szeroka `1fr`, razem cztery kolumny.
repeat(3, minmax(50px, 90px))	kolumny od 50 do 90 px	Każda kolumna ma od 50 do 90 px. W szerokiej ramce zatrzymują się na 90 px, a po zwężeniu (przeciągnij prawy dolny róg) kurczą się, ale nie poniżej 50 px.
repeat(auto-fill, minmax(70px, 1fr))	kolumny na zapas	Przeglądarka tworzy tyle kolumn, ile się zmieści, nawet pustych. Dwa kafelki zajmują tylko część szerokości, a reszta zostaje wolna. Zwężaj ramkę, żeby zobaczyć, jak znikają kolejne kolumny.
repeat(auto-fit, minmax(70px, 1fr))	puste kolumny znikają	Puste kolumny zwijają się do zera, więc te same dwa kafelki rozciągają się na całą szerokość. Porównaj z `auto-fill` obok.

Typowe wzorce w praktyce

repeat(3, 1fr)

Trzy kolumny po równej części szerokości. Sześć kafelków układa się w dwa rzędy.

.demo {
  grid-template-columns: repeat(3, 1fr);
}

repeat(2, 60px 1fr)

Powtarzać można cały wzór. Tu dwa razy para: wąska kolumna 60 px i szeroka 1fr, razem cztery kolumny.

.demo {
  grid-template-columns: repeat(2, 60px 1fr);
}

repeat(3, minmax(50px, 90px))

Każda kolumna ma od 50 do 90 px. W szerokiej ramce zatrzymują się na 90 px, a po zwężeniu (przeciągnij prawy dolny róg) kurczą się, ale nie poniżej 50 px.

.demo {
  grid-template-columns:
    repeat(3, minmax(50px, 90px));
}

repeat(auto-fill, minmax(70px, 1fr))

Przeglądarka tworzy tyle kolumn, ile się zmieści, nawet pustych. Dwa kafelki zajmują tylko część szerokości, a reszta zostaje wolna. Zwężaj ramkę, żeby zobaczyć, jak znikają kolejne kolumny.

.demo {
  grid-template-columns:
    repeat(auto-fill, minmax(70px, 1fr));
}

repeat(auto-fit, minmax(70px, 1fr))

Puste kolumny zwijają się do zera, więc te same dwa kafelki rozciągają się na całą szerokość. Porównaj z auto-fill obok.

.demo {
  grid-template-columns:
    repeat(auto-fit, minmax(70px, 1fr));
}

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Przy auto-fill i auto-fit minimum w minmax() musi być stałe, np. 160px, a nie auto ani 1fr. Inaczej przeglądarka nie policzy, ile kolumn się zmieści.
Gdy elementów jest mało, a mają rozciągać się na całą szerokość, wybierz auto-fit. Gdy mają zachować swój rozmiar, wybierz auto-fill.
Zapis minmax(min(160px, 100%), 1fr) chroni przed poziomym przewijaniem na ekranach węższych niż 160 px.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs