Kursus anbefaling:

CSS repeat() funktion

Definering og brug repeat() CSS

Funktion bruges til at gentage en gruppe kolonner eller rækker i netværket.

Denne funktion er nyttig, hvis dit netværk har mange rækker eller kolonner. Gennem denne funktion kan du oprette en 'gentagelsesmønster', der kan bruges. grid-template-columns Egenskaber og grid-template-rows Brug egenskaber sammen.

Eksempel

Eksempel 1

Brug repeat() Gentag en gruppe kolonner i netværket:

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

Prøv det selv

Eksempel 2

Brug repeat() Gentag en gruppe kolonner i netværket:

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

Prøv det selv

CSS syntaks

repeat(repeat-count, tracks)
Værdi Beskrivelse
repeat-counts

Obligatorisk. Angiver antallet af gange kolonnerne eller rækkerne skal gentages.

Kan være 1 eller en større hel tal, eller de nøgleord auto-fill eller auto-fit (de gentager kolonnerne/rækkerne efter behov for at fylde op i rutenettbeholderen).
tracks

Obligatorisk. Angiver hvilke gentagne kolonner eller rækker der skal specificeres. Kan bruge følgende værdier:

  • Længdeværdier (px, em, %, fr, ch)
  • min-content
  • max-content
  • auto
  • minmax()
  • fit-content()
  • Navngivne linjer

Tekniske detaljer

Version: CSS Grid Layout Module Level 2

Browserunderstøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter denne funktion.

Chrome Edge Firefox Safari Opera
57 16 76 10.1 44

Relaterede sider

Referencer:CSS grid-template-columns egenskab

Referencer:CSS grid-template-rows egenskab