Polecane kursy:

Funkcja repeat() CSS

Definicja i użycie repeat() CSS

Funkcja służy do powtarzania grupy kolumn lub wierszy w sieci.

Ta funkcja jest bardzo przydatna, jeśli w sieci masz dużą liczbę wierszy lub kolumn. Dzięki tej funkcji możesz utworzyć "mode powtarzania", który można użyć. grid-template-columns Atrybuty i grid-template-rows Współdziel�性 atrybutów.

Przykład

Przykład 1

Użyj repeat() Powtarzaj grupę kolumn w sieci:

#container {
  display: grid;
  grid-template-columns: repeat(2, 60px 1fr);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

Spróbuj sam

Przykład 2

Użyj repeat() Powtarzaj grupę kolumn w sieci:

#container {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

Spróbuj sam

Gramatyka CSS

repeat(repeat-count, tracks)
Wartość Opis
repeat-counts

Wymagane. Określa liczbę powtórzeń kolumn lub wierszy.

Może być 1 lub większą liczbą całkowitą, lub kluczowymi słowami auto-fill lub auto-fit (powtarzają kolumny/wiersze według potrzeby, aby wypełnić kontener siatki).
tracks

Wymagane. Określa powtarzające się kolumny lub zestawy wierszy. Można użyć następujących wartości:

  • Wartości długości (px, em, %, fr, ch)
  • min-content
  • max-content
  • auto
  • minmax()
  • fit-content()
  • Nazwane linie

Szczegóły techniczne

Wersja: Moduł układu siatki CSS Grid Layout Level 2

Obsługa przeglądarek

Tabela zawiera numery wersji przeglądarek, które w pełni obsługiwały tę funkcję.

Chrome Edge Firefox Safari Opera
57 16 76 10.1 44

Strony związane

Referencje:Atrybut CSS grid-template-columns

Referencje:Atrybut CSS grid-template-rows