`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)

🡇

🡅

CSS Grid Layout Module Level 3

Statut du document: WD (document de travail)

CSS Grid Layout Module Level 2

Statut du document: CR (document candidat à la recommandation)

CSS Grid Layout Module Level 1

Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de `repeat()`.

Schéma syntaxique de la fonction repeat().
Cliquez sur les termes du diagram pour plus de précision.
Télécharger le schéma en SVG.

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 :

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.

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 :

repeat( 3, 200px )

repeat( 6, 1fr )

repeat( 3, 1fr 2fr )

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.

Fonction repeat()
avec
grid-template-columns

Fonction repeat()
avec
grid-template-rows

Estimation de la prise en charge globale.

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

Historique de la fonction `repeat()`.

Module CSS - Mise en page par grille - Niveau 1

Cette spécification définit comment réaliser des mises en page sous frome de grilles, composées de lignes et de colonnes, avec une structure du document qui reste très simple : un conteneur et autant d'éléments que de cellules. Beaucoup plus simple en tout cas que les tableaux.
Chacune des cellules peut être alignée horizontalement dans le largeur des colonnes, ou verticalement dans la hauteur des lignes. Elles peuvent aussi être réparties ou agrandies pour couvrir toute la place disponible. Le contenu de chacune des cellules peut être aligné horizontalement et verticalement.
Une nouvelle unité (fr) est disponible pour dimensionner les colonnes ou les lignes.

Concernant repeat(). Présentation de la fonction repeat() pour faciliter l'énumération des colonnes d'une grille.

07 Avril 2011
Document de travail.
29 Septembre 2016
Candidat à la recommandation.
Module CSS - Mise en page par grille - Niveau 2

Ce niveau 2 de la spécification sur les grilles introduit la notion de sous-grille. Il s'agit de grille imbriquées dans une autre, avec conservation des alignement de colonnes et/ou de lignes.

Concernant repeat(). Pas de changement concernant la syntaxe de la fonction repeat().

06 Février 2018
Document de travail.
18 Août 2020
Candidat à la recommandation.
Module CSS - Mise en page par grille - Niveau 3

Le niveau 3 de la spécification introduit une nouvelle notion : les grilles maçonnerie. Il s'agit de grilles dont seules les colonnes ou les lignes sont figées, l'autre dimension pouvant évoluer en fonction de la taille des éléments contenus. Ceci a nécessité l'ajout de plusieurs propriétés.

Concernant repeat(). Adaptation de la syntaxe de la fonction repeat() aux nouvelles grilles du type "Maçonnerie" (masonry).

19 Septembre 2024
Document de travail.