Kursrekommendation:

CSS repeat() funktion

Definition och användning repeat() CSS

Funktion används för att upprepa ett uppsättning kolumner eller rader i nätverket.

Denna funktion är mycket användbar om ditt nätverk har många rader eller kolumner. Genom denna funktion kan du skapa ett "upprepade mönster" att använda. grid-template-columns Egenskaper och grid-template-rows Använd egenskaper tillsammans.

Exempel

Exempel 1

Använd repeat() Upprepa ett uppsättning kolumner i nätverket:

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

Prova själv

Exempel 2

Använd repeat() Upprepa ett uppsättning kolumner i nätverket:

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

Prova själv

CSS-syntax

repeat(repeat-count, tracks)
Värde Beskrivning
repeat-counts

Obligatorisk. Ange hur många gånger kolumnen eller raduppsättningen ska upprepas.

Kan vara 1 eller ett större heltal, eller nyckelorden auto-fill eller auto-fit (de upprepar kolumner/raduppsättningar efter behov för att fylla ut rutmåtten).
tracks

Obligatorisk. Ange upprepade kolumner eller raduppsättningar. Följande värden kan användas:

  • Längdvärden (px, em, %, fr, ch)
  • min-content
  • max-content
  • auto
  • minmax()
  • fit-content()
  • Namngivna linjer

Tekniska detaljer

Version: CSS Grid Layout Modul Nivå 2

Webbläsarstöd

Tabellens siffror anger den första versionen av webbläsaren som helt stöder denna funktion.

Chrome Edge Firefox Safari Opera
57 16 76 10.1 44

Relaterade sidor

Referens:CSS grid-template-columns egenskap

Referens:CSS grid-template-rows egenskap