Repeat() - Fonction CSS

repeat()

Résumé des caractéristiques de la fonction repeat()

Description rapide
Facilite la définition des lignes ou des colonnes d'une grille lorsqu'elles sont nombreuses.
Statut
Standard
Valeurs prédéfinies
auto-fill | auto-fit | auto-areas
Pourcentages
Utilisables sur le deuxième paramètre, les pourcentages sont calculés par rapport à la largeur ou la hauteur du container grille.
Module W3C
Module CSS - Mise en page par grille
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: CR (document candidat à la recommandation)
Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de repeat().

Repeat() function - Syntax diagramSyntax diagram of the repeat() CSS function. See stylescss.free.fr for details. integer integer auto-fill auto-fill auto-fit auto-fit , , length lengthrepeat()repeat()
Schéma syntaxique de la fonction repeat()
Syntaxe détaillée et exemples

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

  • integer est un nombre entier, positif, sans unité.
  • length est une valeur numérique positive, suivie d'une des unités de dimension.
  • Plusieurs valeurs length peuvent être indiquées, séparées par des espaces.

Description de la fonction repeat().

La fonction repeat() est utilisée pour définir les largeurs des colonnes d'une grille ou les hauteurs des lignes. repeat() évite de répéter les valeurs identiques plusieurs fois. Cela allège l'écriture.

Exemple :

grid-template-columns: repeat(10, 10%); /* Est équivalent à : */ grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10% ;

Pour plus d'informations sur le dimensionnement des lignes ou des colonnes d'une grille, reportez-vous aux pages sur les propriétés grid-template-rows et grid-template-columns, ainsi qu'à la description de l'unité fr.

La valeur repeat() peut être utilisée avec les propriétés suivantes :

Syntaxes de la fonction repeat().

  • grid-template-columns: repeat(5, 200px); n w

    n est un nombre entier positif, sans unité, qui indique le nombre de répétitions.

    w est la largeur d'une colonne. Reportez-vous aux propriétés grid-template-columns et grid-template-rows pour connaître les différentes syntaxes acceptées pour cette valeur.

    Il faut noter que la valeur w peut être une série de plusieurs valeurs, mais la fonction repeat() ne considérera pas qu'il s'agit de plusieurs paramètres : tout ce qui suit la virgule est considéré comme la valeur à répéter.
    Ainsi la syntaxe repeat(5, 5% 15%) est équivalente à
    5% 15% 5% 15% 5% 15% 5% 15% 5% 15%.

    La grille ci-dessous a été définie avec 5 colonnes d'une largeur de 50 pixels chacune.

    1
    2
    3
    4
    5
    repeat(5, 50px);
  • grid-template-columns: repeat(auto-fill, 100px); n w

    Lorsque auto-fill est précisé à la place du premier paramètre, la fonction repeat() calcule le nombre de colonnes ou de lignes maximum compte-tenu des dimensions du conteneur.

    Attention ! Pour que repeat() soit utilisable avec auto-fill, les dimensions des colonnes doivent être exprimées dans une unité absolue (pixels par exemple).

    • Si auto-fill est utilisé pour définir des colonnes, la largeur du conteneur doit être définie, ou au moins sa largeur maximale (voir la propriété max-width ou la fonction minmax()).
    • Si auto-fill est utilisé pour définir des lignes, la hauteur ou la hauteur maximale du conteneur doit être définie (voir la propriété max-height ou la fonction minmax()).
    • Le deuxième paramètre w ne doit pas être exprimé en pourcentages.

    La grille ci-dessous a des largeurs définies avec auto-fill : le nombre de colonnes dépend de la largeur du conteneur.

    1
    2
    3
    4
    5
    repeat(auto-fill, 75px);
  • grid-template-columns: repeat(auto-fit, 100px); n w

    Avec auto-fit spécifié en premier paramètre, la fonction repeat() se comporte comme avec auto-fill mais les colonnes (ou les lignes) qui se retrouveraient vides après le positionnement des éléments verront leur largeur réduite à 0.

    Dans la grille ci-dessous, le deuxième élément (en bleu) est positionné en colonne 3, ce qui laisse une cellule vide avant lui. En augmentant la largeur du conteneur, vous pourrez faire en sorte que la deuxième colonne de la grille se retrouve entièrement vide. Dans ce cas, le fonctionnement de auto-fit fait disparaître celle colonne (largeur réduite à 0).

    1
    2
    3
    4
    5
    repeat(auto-fit, 60px);

    Mais il est encore plus pertinent d'utiliser auto-fit en définissant les valeurs minimale et maximale pour les largeurs (avec la fonction minmax() par exemple). On obtient alors quelque chose qui s'adapte très bien à la taille de l'écran, et sans perte de place.

    1
    2
    3
    4
    5
    repeat(auto-fit, minmax(60px, 1fr));
  • grid-template-columns: repeat(auto-areas); ⚠

    La valeur auto-areas est réservée aux grilles du type maçonnerie.

    1
    2
    3
    4
    5
    repeat(auto-areas);

Simulateur avec la fonction repeat().

grid-template-columns :
1
2
3
4
5
6
7
8
9
10
11
12

Support de la fonction repeat().

Les navigateurs actuels traitent tous correctement le dimensionnement des lignes ou des colonnes d'une grille avec la fonction repeat(), sauf en ce qui concerne les nouvelles possibilités offertes par les grilles du type maçonnerie.

Colonne 1
Support par les navigateurs de la fonction repeat() pour définir la largeur des colonnes, avec la propriété grid-template-columns.
Colonne 2
Support par les navigateurs de la fonction repeat() pour définir la hauteur des lignes, avec la propriété grid-template-rows.
1
Fonction repeat()
avec
grid-template-columns
2
Fonction repeat()
avec
grid-template-rows
Estimation de la prise en charge globale.
95%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Androïd Brower

Chrome pour Androïd

Opéra

Safari

Firefox

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique de la fonction repeat().

Autres définitions relatives aux grilles.

Propriétés :

grid
Propriété résumée définissant les principaux paramètres d'une grille.
grid-area
Positionne un élément dans une zone nommée de la grille.
grid-auto-columns
Définit la largeur par défaut des colonnes dans une grille.
grid-auto-flow
Définit le mode de calcul automatique pour positionner les éléments dans la grille.
grid-auto-rows
Définit la hauteur par défaut des lignes dans une grille.
grid-column
Numéro(s) de(s) colonne(s) où doit se positionner cet élément dans la grille.
grid-column-end
Numéro de la colonne sur laquelle un élément doit venir se terminer (dans une grille).
grid-column-start
Numéro de la colonne sur laquelle doit commencer un élément dans une grille.
grid-row
Numéro(s) de(s) lignes) où doit se positionner cet élément dans la grille.
grid-row-end
Numéro de la ligne sur laquelle un élément doit venir se terminer (dans une grille).
grid-row-start
Numéro de la ligne sur laquelle doit commencer un élément dans une grille.
grid-template
Propriété résumée pour définir les largeurs de colonnes, la hauteur des lignes, et les plages d'une grille.
grid-template-areas
Définit les zones nommées dans une grille.
grid-template-columns
Définit le nombre et la largeur des colonnes d'une grille.
grid-template-rows
Définit le nombre et la hauteur des lignes d'une grille.

Fonctions :

minmax()
Renvoie une valeur comprise dans une fourchette, pour dimensionner la hauteur des lignes ou la largeur des colonnes d'une grille.
Repeat()
Facilite la définition des lignes ou des colonnes d'une grille lorsqu'elles sont nombreuses.