Corso raccomandato:

Funzione repeat() CSS

Definizione e uso repeat() CSS

La funzione è usata per ripetere un gruppo di colonne o righe nella griglia.

Questa funzione è utile se ci sono molte righe o colonne nella tua griglia. Con questa funzione, puoi creare un "modello di ripetizione" da utilizzare. grid-template-columns Proprietà e grid-template-rows Usa insieme le proprietà.

Esempio

Esempio 1

Usa repeat() Ripeti un gruppo di colonne nella griglia:

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

Prova personalmente

Esempio 2

Usa repeat() Ripeti un gruppo di colonne nella griglia:

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

Prova personalmente

Sintassi CSS

repeat(repeat-count, tracks)
Valore Descrizione
repeat-counts

Obbligatorio. Specifica il numero di volte che le colonne o le righe devono essere ripetute.

Può essere un intero maggiore di 1 o i termini chiave auto-fill o auto-fit (che ripeteranno le colonne/le righe secondo necessità per riempire il contenitore della griglia).
tracks

Obbligatorio. Specifica le colonne o le serie di righe da ripetere. Puoi usare i seguenti valori:

  • Valori di lunghezza (px, em, %, fr, ch)
  • min-content
  • max-content
  • auto
  • minmax()
  • fit-content()
  • Linee di nome

Dettagli tecnici

Versione: Modulo di Layout in CSS Grid Livello 2

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente la funzione per la prima volta.

Chrome Edge Firefox Safari Opera
57 16 76 10.1 44

Pagine correlate

Riferimento:Proprietà CSS grid-template-columns

Riferimento:Proprietà CSS grid-template-rows