CSS repeat() functie

Definitie en gebruik

CSS repeat() De functie wordt gebruikt om een groep kolommen of rijnen in het raster te herhalen.

Als er veel rijen of kolommen in uw raster zijn, is deze functie zeer nuttig. Met deze functie kunt u een 'herhaalpatroon' maken voor gebruik.

Deze functie werkt samen met grid-template-columns Eigenschappen en grid-template-rows Gebruik de eigenschappen samen.

Voorbeeld

Voorbeeld 1

Gebruik repeat() Herhaal een groep kolommen in het raster:

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

Probeer het zelf uit

Voorbeeld 2

Gebruik repeat() Herhaal een groep kolommen in het raster:

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

Probeer het zelf uit

CSS syntaxis

repeat(repeat-count, tracks)
Waarde Beschrijving
repeat-counts

Verplicht. Specificeer het aantal keren dat kolommen of rijnen moeten worden herhaald.

Kan een 1 of grotere integer zijn, of de sleutelwoorden auto-fill of auto-fit (ze herhalen kolommen/rijnen naar behoefte om de gridcontainer te vullen).
tracks

Verplicht. Specificeer de herhaalde kolommen of rijsets. U kunt de volgende waarden gebruiken:

  • Lengtewaarden (px, em, %, fr, ch)
  • min-content
  • max-content
  • auto
  • minmax()
  • fit-content()
  • Benaming van lijnen

Technische details

Versie: CSS Grid Layout Module Level 2

Browserondersteuning

Tafelnummers geven de browserversie aan die de functie volledig ondersteunt.

Chrome Edge Firefox Safari Opera
57 16 76 10.1 44

Gerelateerde pagina's

Referentie:CSS grid-template-columns eigenschap

Referentie:CSS grid-template-rows eigenschap