Cours recommandés :

Fonction repeat() CSS

Définition et utilisation repeat() CSS

Fonction utilisée pour répéter un ensemble de colonnes ou de lignes dans une grille.

Cette fonction est utile si vous avez de nombreuses lignes ou colonnes dans votre grille. Grâce à cette fonction, vous pouvez créer un "schéma de répétition" à utiliser. grid-template-columns et grid-template-rows Utilisez les attributs ensemble.

Exemple

Exemple 1

Utilisez repeat() Répétez un ensemble de colonnes dans la grille :

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

Essayez-le vous-même

Exemple 2

Utilisez repeat() Répétez un ensemble de colonnes dans la grille :

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

Essayez-le vous-même

Syntaxe CSS

repeat(repeat-count, tracks)
Valeur Description
repeat-counts

Obligatoire. Spécifiez le nombre de répétitions des colonnes ou des lignes.

Peut être un entier supérieur ou égal à 1, ou les mots-clés auto-fill ou auto-fit (ils répèteront les colonnes ou les lignes selon les besoins pour remplir le conteneur de grille).
tracks

Obligatoire. Spécifiez les ensembles de colonnes ou de lignes répétés. Vous pouvez utiliser les valeurs suivantes :

  • Valeurs de longueur (px, em, %, fr, ch)
  • min-content
  • max-content
  • auto
  • minmax()
  • fit-content()
  • Lignes nommées

Détails techniques

Version : Module de mise en page en grille CSS Level 2

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Chrome Edge Firefox Safari Opéra
57 16 76 10.1 44

Pages associées

Référence :Propriété CSS grid-template-columns

Référence :Propriété CSS grid-template-rows