Fonction repeat() CSS
Exemple
Fragment de la liste de pistes répétée :
#container {
display: grid;
grid-template-columns: repeat(2, 50px 1fr) 100px;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8CC6FF;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
Essayez-le vous-même »
Définition et utilisation
La fonction repeat() représente un fragment répété de la liste de pistes, permettant d'écrire sous une forme plus compacte un grand nombre de colonnes ou de lignes qui affichent un motif répétitif.
Cette fonction peut être utilisée dans les propriétés CSS Grid.grid-template-columnsetgrid-template-rows。
Versions prises en charge : CSS3
Prise en charge des navigateurs
Le nombre dans le tableau indique le premier numéro de version de navigateur prenant en charge cette fonction.
| Fonction | |||||
|---|---|---|---|---|---|
| var() | 57.0 | 16.0 | 76.0 | 10.1 | 44.0 |
Syntaxe CSS
/* <track-repeat> values */ 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]) /* <auto-repeat> values */ 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]) /* <fixed-repeat> values */ 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])
| Valeur | Description |
|---|---|
| longueur | Longueur entière positive. |
| pourcentage | Un pourcentage non négatif relatif à la taille en ligne du conteneur de grille pour les pistes de colonnes, et à la taille de bloc du conteneur de grille pour les pistes de lignes. Si la taille du conteneur de grille dépend de la taille de ses pistes, le pourcentage doit alors être traité comme auto. L'agent utilisateur peut ajuster la contribution de la taille intrinsèque de la piste à la taille du conteneur de grille, en augmentant la taille finale de la piste de la quantité minimale nécessaire pour se conformer au pourcentage. |
| flex | Une dimension non négative avec l'unité fr spécifie le facteur de flexibilité de la piste. Toute piste dimensionnée avec flex répartira l'espace restant proportionnellement selon son facteur de flexibilité. |
| max-content | Représente la valeur maximale de la zone de contenu maximale allouée aux éléments de grille occupant la piste de grille. |
| min-content | Représente la valeur minimale de la zone de contenu minimale allouée aux éléments de grille occupant la piste de grille. |
| auto | En tant que valeur maximale, elle est équivalente à max-content. En tant que valeur minimale, elle représente le maximum des tailles minimales des éléments de grille occupant la piste de grille (comme spécifié par min-width/min-height). |
| auto-fill | Si le conteneur de grille a une taille définie ou une taille maximale dans l'axe concerné, alors le nombre de répétitions est le plus grand nombre entier positif possible qui ne provoque pas de débordement de la grille hors de son conteneur de grille. Si elle est définie, chaque piste est traitée comme sa fonction de dimensionnement de piste maximale (chaque valeur indépendante définie par grid-template-rows ou grid-template-columns). Sinon, elle est traitée comme la fonction de dimensionnement de piste minimale, les gouttières de grille étant incluses dans le calcul. Si le nombre de répétitions est trop grand, alors la valeur repeat est 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 nombre entier positif qui satisfait cette exigence minimale. Sinon, la liste de pistes spécifiée n'est répétée qu'une seule fois. |
| 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 dans laquelle aucun élément de grille ne s'écoule ni ne s'étend. (Si toutes les pistes sont vides, cela peut entraîner l'effondrement de toutes les pistes.) Une piste effondrée est traitée comme ayant une seule fonction de dimensionnement de piste fixe de 0px, et les gouttières des deux côtés sont effondrées. Afin de trouver le nombre de pistes répétées automatiquement, l'agent utilisateur contraint la taille de piste à une valeur spécifiée par l'agent utilisateur (par exemple 1px), afin d'éviter une division par zéro. |
autres extensions