Fonction CSS repeat()

Exemple interactif

grid-template-columns: repeat(2, 60px);
rule-color: repeat(2, green, orange), yellow;

grid-template-columns: 1fr repeat(2, 60px);
rule-color: repeat(2, green), repeat(2, yellow);

grid-template-columns: repeat(2, 20px 1fr);
rule-color: repeat(auto, green), repeat(2, yellow);

grid-template-columns: repeat(auto-fill, 40px);
rule-color: repeat(2, orange, yellow), repeat(auto, green);

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 220px;
  rule: solid 4px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Cette fonction peut être utilisée avec les fonctionnalités suivantes :

Les propriétés CSS de la grille :

• grid-template-columns
• grid-template-rows

Les propriétés CSS des écarts :

• column-rule-color
• row-rule-color
• rule-color (raccourcie)
• column-rule-style
• row-rule-style
• rule-style (raccourcie)
• column-rule-width
• row-rule-width
• rule-width (raccourcie)
• column-rule (raccourcie)
• row-rule (raccourcie)
• rule (raccourcie)

Syntaxe

/* Valeurs de type <track-repeat> */
repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] 1fr [col-end])
repeat(4, [col-start] min-content [col-end])
repeat(4, [col-start] max-content [col-end])
repeat(4, [col-start] auto [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
repeat(4, [col-start] min-content [col-middle] max-content [col-end])

/* Valeurs de type <auto-repeat> */
repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(auto-fill, [col-start] 250px [col-end])
repeat(auto-fit, [col-start] 250px [col-end])
repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])

/* Valeurs de type <fixed-repeat> */
repeat(4, 250px)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])

/* Valeurs de type <name-repeat> */
repeat(5, [footer])
repeat(auto-fill, [header])
repeat(2, [header footer])

/* <repeat-line> */
repeat(4, dashed)
repeat(2, solid, dotted, inset)
repeat(3, medium)
repeat(4, red)
repeat(3, green medium outset)

/* <auto-repeat-line> */
repeat(auto, dotted)
repeat(auto, 10px)
repeat(auto, currentcolor)
repeat(auto, red, blue, green)
repeat(auto, var(--lineColor) var(--lineSize) solid)

Valeurs

La fonction repeat() prend deux arguments : le premier argument définit le nombre de répétitions, et le second définit la liste des valeurs répétées (la liste des valeurs à répéter).

Valeurs de nombre de répétitions

<integer>

Un entier positif supérieur ou égal à 1 définissant le nombre de fois que la liste des fonctionnalités dans le deuxième paramètre est répétée.

auto-fill

Définit un répéteur automatique qui se répète pour remplir un espace. Se résout au plus grand nombre de répétitions qui ne provoque pas de débordement d'une boîte de contenu contrainte (ayant une taille maximale). Sinon, si la boîte de contenu a une taille minimale, le plus petit nombre de répétitions qui satisfait la taille minimale. S'il n'y a ni taille minimale ni maximale, se résout à 1. Lorsqu'il est utilisé avec subgrid, le deuxième paramètre doit être une liste de noms de lignes.

auto-fit

Se comporte comme auto-fill, sauf qu'après avoir placé les éléments de la grille, toutes les pistes répétées vides sont effondrées.

auto

Définit un répéteur automatique. Une fois que les valeurs des autres composants de la valeur de la propriété ont été appliquées, les valeurs du deuxième paramètre sont répétées autant de fois que nécessaire, remplissant toutes les valeurs manquantes.

Liste des valeurs répétées

Une liste provenant de l'un des types de liste de pistes suivants. Que les composants de la liste soient séparés par des virgules ou des espaces dépend du séparateur attendu pour ce type de liste de valeurs de propriété.

<line-names>

Pour ajouter des noms de lignes aux sous-grilles, chaque <line-names> est constitué de zéro ou plusieurs valeurs <custom-ident>, séparées par des espaces et entourées de crochets, par exemple [start header-start].

<track-size>

Chaque <track-size> est une <length-percentage> positive, une fonction minmax() dont le premier paramètre est le mot-clé min-content, max-content ou auto, ou une fit-content() fonction.

<fixed-size>

Chaque <fixed-size> est soit une <length-percentage> positive, soit une fonction minmax() dont le premier paramètre est une <length-percentage> positive et dont le second paramètre est une dimension qui n'est pas négative avec l'unité fr définissant le facteur de flexion de la piste ou le mot-clé min-content, max-content ou auto, soit une fonction minmax() dont le premier paramètre est une <length-percentage> positive ou le mot-clé min-content, max-content ou auto, et dont le second paramètre est une <length-percentage> positive.

<value>

Pour définir des règles d'espacement, chaque <value> est une valeur qui est acceptée par la propriété dans laquelle le repeat() apparaît, comme une <line-style>, <line-width>, <color>, ou les trois en tant que <gap-rule>.

Description

La fonction repeat() représente un fragment répété dans une liste de valeurs séparées par des virgules ou des espaces, ce qui permet d'écrire un motif récurrent de manière plus compacte, pouvant être répété un nombre défini de fois ou automatiquement.

La forme générique de la syntaxe repeat() est, approximativement,

repeat( <repeat-count>, <values-list> )

Le premier argument, le nombre de répétitions, définit le nombre de répétitions. Il définit le nombre de fois que la liste de valeurs définie dans le second paramètre doit être répétée. Il est défini soit comme une valeur entière de 1 ou plus, soit comme le mot-clé auto-fill, auto-fit ou auto.

Le second argument est une liste de valeurs séparées par des virgules ou des espaces, valides pour la propriété dans laquelle le repeat() apparaît. Il définit le type de valeur répétée, qui est généralement les pistes ou les règles de fonctionnalité à répéter.

tracks:

Définit l'ensemble des pistes qui sont répétées. Fondamentalement, cela consiste en une ou plusieurs valeurs séparées par des espaces, chaque valeur représentant la taille de cette piste. Chaque taille est définie en utilisant soit une valeur <track-size>, soit une valeur <fixed-size>. Vous pouvez également définir un ou plusieurs noms de lignes avant ou après chaque piste, en fournissant des valeurs <line-names> avant et/ou après la taille de la piste.

rule feature:

Définit la règle de fonctionnalité qui est répétée. Il s'agit soit d'une liste séparée par des virgules de <color>, <line-width>, ou <line-style> valeurs, soit d'une liste séparée par des virgules de déclarations abrégées définissant la couleur, la largeur et le style de la ligne.

Formes syntaxiques

La syntaxe de la fonction repeat() prend plusieurs formes :

<track-repeat> = repeat( <integer>, [ <line-names>? <track-size> ]+ <line-names>? )

L'entier (<integer>) définit le nombre de répétitions.

Les valeurs <track-size> définissent la taille de la piste. Un <track-size> est soit une <length-percentage>, soit une valeur <flex> (une valeur positive d'unité fr), soit le mot-clé min-content, max-content ou auto, soit une fonction fit-content() avec un paramètre <length-percentage>, soit une fonction minmax(). Pour les valeurs de piste minmax(), min est soit un <length-percentage>, soit le mot-clé min-content, max-content ou auto, tandis que max peut être l'un de ces mots-clés ou une valeur <flex>.

Chaque <track-size> est éventuellement précédé de <line-names>, qui sont zéro ou plusieurs valeurs <custom-ident> séparées par des espaces et entourées de crochets.

Un <line-names> final est facultatif.

<auto-repeat> = repeat( auto-fill | auto-fit, [ <line-names>? <fixed-size> ]+ <line-names>? )

Le mot-clé auto-fill ou auto-fit définit le nombre de répétitions.

Le <fixed-size> définit la taille de la piste. Un <fixed-size> est soit une valeur <length-percentage>, soit une fonction minmax() dont min ou max est un <length-percentage> et dont l'autre valeur est aussi un <length-percentage>, soit la valeur du mot-clé min-content, max-content ou auto.

Chaque <fixed-size> est éventuellement précédé de <line-names>.

Un <line-names> final est facultatif.

<fixed-repeat> = repeat( <integer>, [ <line-names>? <fixed-size> ]+ <line-names>? )

Identique à <auto-repeat>, sauf que le <integer> définit le nombre de répétitions, donc il n'y a pas de répétition automatique.

<name-repeat> = repeat( [ <integer> | auto-fill ], <line-names>+)

L'entier ou le mot-clé auto-fill définit le nombre de répétitions.

Les <line-names> sont une ou plusieurs valeurs <custom-ident> séparées par des espaces et entourées de crochets.

Ces noms de lignes (plutôt que les tailles de piste) concernent subgrid.

<repeat-value-type> = repeat( <integer> , <value># )

Le <integer> définit le nombre de répétitions.

Le <value> est une ou plusieurs valeurs valides séparées par des virgules pour la propriété sur laquelle la fonction repeat() est appliquée.

Plusieurs fonctions repeat() du <repeat-value-type> peuvent être utilisées dans une seule déclaration de valeur.

<auto-repeat-value-type> = repeat( auto , <value># )

Le mot-clé auto définit un répéteur automatique. Un répéteur automatique est utilisé pour compléter les valeurs des espaces qui ne recevraient pas autrement de valeurs des autres parties de la liste.

Le <value> est une ou plusieurs valeurs valides séparées par des virgules pour la propriété sur laquelle la fonction repeat() est appliquée.

Au plus une fonction repeat() dans une liste donnée de valeurs peut être un répéteur automatique.

auto-fit contre auto-fill

Lorsque le premier paramètre de la fonction repeat() est un mot-clé, auto-fill, auto-fit ou auto, plutôt qu'un entier, elle crée un répéteur automatique. Une fonction repeat() à répétition automatique répète les valeurs fournies comme second paramètre autant de fois que nécessaire.

Avec auto-fill, si le conteneur a une taille définie ou maximale dans l'axe concerné, le nombre de répétitions est le plus grand entier positif possible qui ne provoque pas de débordement du contenu hors de son conteneur. En considérant chaque piste comme sa fonction de dimensionnement maximale de piste (chaque valeur indépendante utilisée pour définir grid-template-rows ou grid-template-columns), si cela est défini. Sinon, s'il n'existe aucune taille définie ou maximale, la fonction repeat() est une fonction de dimensionnement minimal de piste. Si un nombre quelconque de répétitions provoque un débordement, la répétition vaut 1. Sinon, si le conteneur de grille a une taille minimale définie dans l'axe concerné, le nombre de répétitions est le plus petit entier positif possible qui satisfait cette exigence minimale. Sinon, la liste de pistes définie ne se répète qu'une seule fois.

La valeur auto-fit se comporte comme auto-fill, sauf qu'après le placement des éléments de grille, toutes les pistes répétées vides sont effondrées. Une piste vide est une piste qui ne contient aucun élément de grille en flux placé dedans ou la traversant. (Cela peut entraîner l'effondrement de toutes les pistes, si elles sont toutes vides.)

Une piste effondrée est traitée comme ayant une seule fonction fixe de dimensionnement de piste de 0px, et les gouttières de part et d'autre s'effondrent.

Pour déterminer le nombre de pistes répétées automatiquement, l'agent utilisateur arrondit la taille de la piste à une valeur définie par l'agent utilisateur (par exemple 1px), afin d'éviter une division par zéro.

Utiliser des exceptions et des règles

Il existe quelques règles et restrictions lors de l'utilisation de repeat() :

Une valeur de propriété peut contenir plusieurs fonctions repeat().

.enveloppe {
  grid-template-columns:
    repeat(2, 10px)
    repeat(2, minmax(min-content, max-content));
}

Une valeur de propriété peut contenir au plus une fonction repeat() à répétition automatique.

.enveloppe {
  row-rule:
    repeat(auto, yellow 3px solid, red 1px dashed),
    repeat(auto, green 5px dotted);
}

Si une déclaration de propriété utilise <auto-repeat>, elle ne peut utiliser <fixed-repeat> que pour les appels supplémentaires à repeat(). Les répétitions automatiques (auto-fill ou auto-fit) ne peuvent pas être combinées avec des tailles totalement intrinsèques ou flexibles. Par exemple, c'est invalide, car cela combine la forme <auto-repeat> avec la forme <track-repeat> :

.enveloppe {
  grid-template-columns:
    repeat(auto-fill, 10px)
    repeat(2, minmax(min-content, max-content));
}

La notation repeat() ne peut pas être imbriquée dans une autre fonction repeat().

.enveloppe {
  grid-template-columns: repeat(
    2,
    minmax(min-content, max-content),
    repeat(3, 10px)
  );
  column-rule: repeat(
    auto,
    yellow 3px solid,
    repeat(5, green 5px dotted),
    red 1px dashed
  );
}

Syntaxe formelle

<track-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<auto-repeat> = 
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<fixed-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<name-repeat> = 
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )  

<integer> = 
  <number-token>  

<line-names> = 
  '[' <custom-ident>* ']'  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )          

<fixed-size> = 
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )  

<track-breadth> = 
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto                       

<inflexible-breadth> = 
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto                       

<length-percentage> = 
  <length>      |
  <percentage>  

<fixed-breadth> = 
  <length-percentage [0,∞]>  

Exemples

Définir des colonnes de grille en utilisant repeat()

HTML

<div id="container">
  <div>Un élément qui mesure 50 pixels de large.</div>
  <div>Un élément avec une largeur flexible.</div>
  <div>Un élément qui mesure 50 pixels de large.</div>
  <div>Un élément avec une largeur flexible.</div>
  <div>Un élément non-flexible qui mesure 100 pixels de large.</div>
</div>

CSS

#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

Résultat

Spécifications

Compatibilité des navigateurs

css.properties.grid-template-columns.repeat

css.properties.row-rule.repeat

Voir aussi

• La propriété grid-template
• La propriété grid-template-rows
• La propriété grid-template-columns
• La propriété grid-template-areas
• La propriété grid-auto-columns
• La propriété grid-auto-rows
• La propriété grid-auto-flow
• Placement basé sur les lignes avec CSS Grid
• Zones de modèle de grille : raccourcis de définition de grille
• Le module de disposition de grille CSS
• Le module d'espacement CSS