Comment utiliser la fonction CSS Grid repeat() — SitePoint

Dans cet article, nous explorerons toutes les possibilités de la fonction CSS Grid repeat(), qui nous permet de créer efficacement des modèles de colonnes et de lignes de Grid, et même de créer des mises en page réactives sans requêtes multimédias.

Les propriétés grid-template-columns et grid-template-rows nous permettent de définir explicitement le nombre de lignes et de colonnes que nous voulons dans une grille, et de spécifier comment elles doivent être dimensionnées. Cela peut devenir répétitif si nous voulons que plusieurs lignes et/ou colonnes soient dimensionnées de la même manière.

La fonction repeat() peut nous éviter de devoir nous répéter. Par exemple, nous pourrions nous retrouver à écrire ceci :

Au lieu de cela, nous pouvons écrire ceci :

Dans l'exemple ci-dessus, la fonction repeat() nous permet de spécifier combien de colonnes nous voulons (5) et quelle taille elles doivent toutes avoir (1fr — ou une fraction de l'espace disponible).

Cela rend notre code plus efficace et plus facile à lire. Et ce n'est qu'un exemple simple. Comme nous le verrons ci-dessous, nous pouvons faire beaucoup plus avec la fonction repeat().

Le stylo suivant montre une démonstration simple du code ci-dessus. Un article contenant dix divs est organisé en cinq colonnes.

Voir Pen CSS Grid repeat() : 5 colonnes simples par SitePoint (@SitePoint) sur CodePen.

Nous pouvons en fait faire beaucoup de choses entre parenthèses avec repeat(). Il faut deux arguments, séparés par une virgule. Le premier représente le « compte », et le second représente les « pistes » : répéter(, ). (Le mot « piste » est un nom générique pour une colonne ou une ligne.)

Lecompterl’argument peut être l’une des trois choses suivantes :

De toute évidence, une valeur numérique définit un nombre spécifique de pistes. Mais l'ajustement et le remplissage automatiques permettent un nombre variable de pistes en fonction de l'espace disponible. Cela les rend très pratiques pour les mises en page réactives sans requêtes multimédias. Nous les explorerons en détail ci-dessous.

Ledes pistes L'argument spécifie les pistes qui seront répétées. Voici les options pour cet argument :

Comme vous pouvez le constater, il existe de nombreuses options possibles pour cet argument, et elles peuvent commencer à paraître un peu déroutantes, surtout lorsque plusieurs d’entre elles sont combinées. Nous allons essayer de garder les choses assez simples ici afin de ne pas nous perdre dans les mauvaises herbes. Dans la plupart des cas, l’argument des pistes est assez simple et intuitif.

Avant d'explorer les différents arguments pouvant être utilisés avec Repeat(), il convient de noter que Repeat() peut être utilisé pour créer des modèles de colonnes.

Par exemple, considérons ce code « longhand » pour une grille à six colonnes :

Nous pouvons réécrire ceci ainsi, en utilisant repeat() :

Cela indique au navigateur de répéter un modèle trois fois : d'une colonne de 1 fr de large, suivie d'une colonne de 2 fr de large. La démo ci-dessous montre cela en action.

Voir Pen CSS Grid Repeat() : modèles de colonnes par SitePoint (@SitePoint) sur CodePen.

Nous avons déjà vu une valeur de longueur de 1fr utilisée avec repeat(). L'avantage de l'unité fr est qu'elle dimensionne les pistes en fonction de l'espace disponible sans que nous ayons à nous soucier de l'espace disponible. Mais nous pouvons également utiliser d’autres unités de longueur lorsque nous en avons besoin.

Par exemple, définissons trois pistes de colonnes et donnons-leur une largeur de 120 pixels :

La démo CodePen suivante montre le résultat.

Voir Pen CSS Grid Repeat() : valeurs de longueur par SitePoint (@SitePoint) sur CodePen.

Les colonnes ont désormais une largeur fixe, qui ne changera pas même si le conteneur est trop étroit. Essayez de jouer avec la largeur du navigateur dans le stylet ci-dessus. Essayez également d'échanger les pixels contre d'autres unités de longueur, telles que 5em, 10ch, 15 %, etc., pour voir leur effet.

Le mot-clé min-content définit une piste aussi large ou haute que son contenu minimum. Dans la démo ci-dessous, nous avons trois colonnes, chacune étant définie sur min-content, donc chaque colonne est aussi large que le mot le plus long qu'elle contient :

Voir Pen CSS Grid repeat(): min-content par SitePoint (@SitePoint) sur CodePen.

Le mot-clé max-content fait essentiellement le contraire de min-content : il base la taille de la piste sur la plus grande quantité de contenu dans une cellule de la grille. Dans la démo ci-dessous, les largeurs de colonnes sont basées sur la cellule contenant la plus grande quantité de contenu :