Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Fonction repeat()

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% ;

La fonction repeat() peut être utilisée avec :

Syntaxe de la fonction repeat().

  • grid-template-columns;: repeat(5, 20%); n l

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

    l 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 l peut être une série de plusieurs valeurs et même éventuellement comporter des virgules mais la fonction repeat() ne considèrera pas qu'il s'agit de plusieurs paramètres : tout ce qui suit la première 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%.

Simulateur.

grid-template-columns:
( n l )
1
2
3
4
5
6
7
8
9
10

Compatibilité et prise en charge par les navigateurs.

La gestion des grilles et donc de la fonction repeat() est bien prise en charge par les navigateurs récents, sauf Internet Explorer.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Grilles - Propriétés.

  • align-content : Disposition des lignes dans un flex-box ou une grille.
  • align-items : Disposition verticale des éléments dans un flex-box ou une grille.
  • align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
  • grid : Propriété raccourcis 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 : Mode de calcul des colonnes 'auto' dans une grille.
  • grid-auto-flow : Mode de calcul de l'emplacement des éléments dans la grille.
  • grid-auto-rows : Mode de calcul de la hauteur 'auto' des lignes dans une grille.
  • grid-column : Numéro de colonne(s) d'un élément dans une grille.
  • grid-column-end : Numéro de la colonne de fin d'un élément dans une grille.
  • grid-column-gap : Ajuste l'espacement des colonnes dans une grille.
  • grid-column-start : Numéro de la colonne de début d'un élément dans une grille.
  • grid-gap : Ajuste l'espacement des lignes et des colonnes dans une grille.
  • grid-row : Numéro des lignes d'un élément dans une grille.
  • grid-row-end : Numéro de la ligne de fin d'un élément dans une grille.
  • grid-row-gap : Ajuste l'espacement des lignes dans une grille.
  • grid-row-start : Numéro de la ligne de départ d'un élément dans une grille.
  • grid-template : Largeur des colonnes et hauteur des lignes d'une grille.
  • grid-template-areas : Définition de zones nommées dans une grille
  • grid-template-columns : Définition du nombre et de la largeur des colonnes d'une grille.
  • grid-template-rows : Définition du nombre et de la hauteur des lignes d'une grille.
  • justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
  • justify-items : Gère l'alignement horizontal des éléments dans le container flex-box ou grille.
  • justify-self : Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.

Grilles - Fonctions.

  • minmax() : Renvoie une valeur comprise dans une fourchette.