CSS repeat() -funktio

Määrittely ja käyttö

CSS repeat() Funktio toistaa joukon sarakkeita tai rivejä verkkorakenteessa.

Jos sinulla on paljon rivejä tai sarakkeita verkkorakenteessasi, tämä funktio on erittäin hyödyllinen. Tämän avulla voit luoda toistuvan mallin käyttöä varten.

Tämä funktio on hyödyllinen grid-template-columns Ominaisuudet ja grid-template-rows Ominaisuudet käytetään yhdessä.

Esimerkki

Esimerkki 1

Käytä repeat() Toista joukko sarakkeita ruudukossa:

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

Kokeile itse

Esimerkki 2

Käytä repeat() Toista joukko sarakkeita ruudukossa:

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

Kokeile itse

CSS-syntax

repeat(repeat-count, tracks)
Arvo Kuvaus
repeat-counts

Välttämätön. Määritä, kuinka monta kertaa sarakkeita tai rivejä tulisi toistaa.

Voisi olla 1 tai suurempi kokonaisluku, tai avainsana auto-fill tai auto-fit (ne toistavat sarakkeita/rivejä tarpeen mukaan täyttääkseen ruudukkocontainerin).
tracks

Välttämätön. Määritä toistuvat sarakkeet tai rivit. Voit käyttää seuraavia arvoja:

  • Pituusarvot (px, em, %, fr, ch)
  • min-content
  • max-content
  • auto
  • minmax()
  • fit-content()
  • Nimetty viiva

Tekninen yksityiskohta

Versio: CSS Grid Layout Module Level 2

Selaimen tuki

Taulukossa olevat numerot ilmaisevat ensimmäisen täysin tukevan selaimen version.

Chrome Edge Firefox Safari Ooppera
57 16 76 10.1 44

Tiedotusvirkailija

Viittaus:CSS grid-template-columns ominaisuus

Viittaus:CSS grid-template-rows ominaisuus