Comment utiliser la fonction CSS Grid Repeat ()

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 grille, et même de créer des dispositions réactives sans requêtes multimédias.

Les plats clés

• La fonction `répéter ()` simplifie la création de motifs de grille, permettant la spécification du nombre de colonnes ou de lignes et de leurs tailles de manière concise, améliorant la lisibilité et l'efficacité du code.
• Il prend en charge diverses options de dimensionnement telles que les longueurs fixes (`px", `` em`, `% ',` fr`), les mots clés basés sur le contenu (`` min-content', `max-content`), et le flexible Mot-clé «Auto», fournissant une polyvalence dans la conception réactive.
• La fonction peut s'intégrer aux mots clés `Auto-Fit` et` `Auto-Fill` pour ajuster automatiquement le nombre de pistes de grille en fonction de la largeur du conteneur, qui est crucial pour créer des dispositions fluide et réactives sans requêtes multimédias.
• L'utilisation de `minmax ()` dans `repeat ()` offre un moyen puissant de définir une gamme pour les tailles de piste, garantissant que le contenu s'adapte en douceur sur différentes tailles de fenêtre.
• Les lignes nommées peuvent être définies dans «répéter ()», en aidant dans le placement précis des éléments de la grille et en améliorant la maintenabilité de la structure de la grille.
• `répéter ()` ne peut pas être imbriqué en lui-même, mais il peut être utilisé aux côtés d'autres valeurs et fonctions pour créer efficacement les dispositions de grille complexes et réactives.

Ne répétez pas () vous-même

Les propriétés des colonnes et des lignes de remplaçant de grille de grille 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 répétée () peut nous empêcher de devoir nous répéter. Par exemple, nous pourrions nous retrouver à écrire ceci:

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

Au lieu de cela, nous pouvons écrire ceci:

<span>grid-template-columns: repeat(5, 1fr);
</span>

Dans l'exemple ci-dessus, la fonction Repeat () nous permet de spécifier le nombre de colonnes que nous voulons (5) et la taille qu'elles devraient toutes être (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, il y a beaucoup plus que nous pouvons faire avec la fonction répétée ().

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

Voir le stylo CSS Grid Repeat (): 5 colonnes simples par SitePoint (@SitePoint) sur codepen.

La démo ci-dessus utilise la propriété CSS GAP. Pour en savoir plus sur la mise en page de la grille, consultez notre guide du débutant sur la grille CSS.

Options pour la fonction répétée ()

Nous pouvons réellement faire beaucoup à l'intérieur des parenthèses de répéter (). Il faut deux arguments, séparés par une virgule. Le premier représente le «comte», et le second représente les «Tracks»: répéter (, ). (Le mot «piste» est un nom générique pour une colonne ou une ligne.)

L'argument du comte peut être l'une des trois choses:

• un nombre (comme 1, 2, 3)
• le mot-clé automatique
• le mot-clé automatique

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

L'argument des pistes spécifie les pistes qui seront répétées. Ce sont les options de cet argument:

• une valeur de longueur, en utilisant des unités telles que FR, PX, EM,% et CH
• Le mot-clé Min-Content
• le mot-clé max-contenu
• le mot-clé automatique
• la fonction minmax (), qui peut elle-même avoir une fonction min () ou max () ou max
• la fonction fit-content ()
• Lignes nommées

Comme vous pouvez le voir, il existe de nombreuses options possibles pour cet argument, et ils peuvent commencer à sembler un peu déroutant, surtout lorsque plusieurs d'entre eux sont combinés. Nous essaierons de garder les choses assez simples ici afin que nous ne nous perdons pas dans les mauvaises herbes. Dans la plupart des cas, l'argument des pistes est assez simple et intuitif.

Définition des groupes de colonnes avec répéter ()

Avant d'explorer les différents arguments qui peuvent être utilisés avec répéter (), il convient de noter que la répétition () peut être utilisée pour créer des modèles de colonnes.

Par exemple, considérez ce code «à la main» pour une grille à six colonnes:

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

Nous pouvons réécrire cela comme ainsi, en utilisant répéter ():

<span>grid-template-columns: repeat(5, 1fr);
</span>

Cela indique au navigateur de répéter un motif trois fois - d'une colonne 1FR de large, suivi d'une colonne 2FR de large. La démo ci-dessous montre cela en action.

Voir le stylo CSS Grid Repeat (): Modèles de colonne par SitePoint (@SitePoint) sur codepen.

en utilisant des valeurs de longueur avec répéter ()

Nous avons déjà vu une valeur de longueur de 1FR utilisée avec répéter (). L'avantage de l'unité FR est qu'il tale des pistes en fonction de l'espace disponible sans que nous ayons à nous soucier de la quantité d'espace disponible. Mais nous pouvons également utiliser d'autres unités de longueur où nous en avons besoin.

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

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

La démonstration de code de code suivante montre le résultat.

Voir le stylo 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 stylo ci-dessus. Essayez également d'échanger des pixels pour d'autres unités de longueur, telles que 5EM, 10CH, 15%, etc., pour voir leur effet.

en utilisant le mot-clé min-contenu avec répéter ()

Le mot-clé Min-Content définit une piste pour être aussi large ou haut que son contenu minimum. Dans la démo ci-dessous, nous avons trois colonnes, chacune étant définie sur un contenu min, donc chaque colonne est aussi large que le mot le plus long qu'il contient:

<span>grid-template-columns: repeat(5, 1fr);
</span>

Voir le stylo CSS Grid Repeat (): Min-Content by SitePoint (@SitePoint) sur codepen.

en utilisant le mot-clé maximum avec répéter ()

Le mot-clé maximum fait essentiellement l'opposé du contenu min: il fonde la taille de la piste sur la plus grande quantité de contenu dans une cellule de grille. Dans la démo ci-dessous, les largeurs de colonne sont basées sur la cellule avec la plus grande quantité de contenu:

<span>article {
</span>  <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>

Voir le stylo CSS Grid Repeal (): Max-contenu par SitePoint (@SitePoint) sur codepen.

en utilisant le mot-clé automatique avec répéter ()

Lorsqu'il est utilisé avec répéter (), le mot-clé auto se maximum à max-contenu et à minimaux à Min-Content.

Considérez le modèle de colonnes suivant:

<span>article {
</span>  <span>grid-template-columns: repeat(3, 1fr 2fr);
</span><span>}
</span>

Ici, nous aurons six colonnes, chaque ensemble de nombres impairs sur une largeur d'auto. Dans la démo de codepen ci-dessous, nous pouvons voir que, là où il y a suffisamment d'espace, les divs avec le texte «auto» max à max-contenu et les divs 1FR partagent l'espace restant. Alors que le navigateur se rétrécit, les colonnes automobiles continuent de devenir plus étroites jusqu'à ce qu'elles atteignent le seuil de contenu min.

Voir le stylo CSS Grid Repeal (): Auto par SitePoint (@SitePoint) sur codepen.

Dans la démo ci-dessus, les Divs ne commencent à déborder du conteneur qu'une fois que chaque colonne a atteint son seuil de contenu min. (C'est-à-dire que le texte ne peut pas s'envelopper plus loin.)

Remarque: Auto semble se comporter comme décrit ci-dessus lorsqu'il est mélangé avec d'autres valeurs. En soi - comme répéter (3, auto) - il se comporte comme nous définissons la répétition (3, 1fr).

en utilisant la fonction minmax () avec répéter ()

La fonction Minmax () prend ses propres arguments - une valeur minimale et maximale, séparée par une virgule. Ainsi, avec Minmax (), nous pouvons définir une gamme de tailles possibles pour les pistes dans un environnement flexible.

Par exemple, nous pourrions définir une colonne sur Minmax (40px, 100px), ce qui signifie que sa largeur minimale possible est de 40px et sa largeur maximale possible est de 100px.

Les deux arguments de Minmax () peuvent prendre des valeurs de longueur comme FR, PX, EM,% et CH, ainsi que Min-Content, Max-Content et Auto. Cependant, il est préférable d'utiliser une valeur de longueur pour au moins un argument, car les mots clés ne sont pas censés fonctionner comme les deux arguments (bien que je trouve que cela fonctionne parfois - comme Minmax (Min-Content, Max-Content)).

Le code suivant définit cinq colonnes, chacune avec une largeur minimale de 60px et une largeur maximale de 1FR:

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

Voir le stylo CSS Grid Repeal (): Minmax () par SitePoint (@SitePoint) sur codepen.

Cela fonctionne bien jusqu'à ce que la largeur minimale de 60px soit atteinte. Après ce moment, le contenu commence à traîner à son conteneur. Nous verrons comment obtenir un meilleur résultat bientôt.

en utilisant la fonction minmax () avec min () ou max ()

La fonction Minmax () peut également avoir la fonction min () ou max () comme un argument. Ceux-ci prennent deux valeurs. La fonction min () s'applique la plus petite de ses deux valeurs, et la fonction max () s'applique la plus grande valeur. Ceci est utile dans des environnements réactifs.

par exemple:

<span>grid-template-columns: repeat(5, 1fr);
</span>

Voir le stylo CSS Grid Repeat (): Fonction Minmax () avec min () par SitePoint (@SitePoint) sur codepen.

Le code ci-dessus définit cinq colonnes. Sur les navigateurs larges, les cinq colonnes seront toutes également espacées à 1FR. Sur les appareils plus étroits, les colonnes deviendront de plus en plus étroites. Ils cesseront de rétrécir une fois qu'ils ont frappé le plus bas de 60px et 8vw. Nous pouvons donc toujours nous retrouver avec du contenu traînant du conteneur sur des écrans étroits; Il y a encore plus d'aller pour être pleinement réactif.

Si vous trouvez la combinaison de Minmax (), Min () et Max () un peu décevante à ce stade, accrochez-vous, car leur véritable pouvoir sera vu ci-dessous lorsque nous rencontrerons l'auto-ats et auto- remplir.

en utilisant la fonction fit-content () avec répéter ()

La fonction fit-content () prend un seul argument, qui représente la taille maximale sur laquelle une piste peut croître. Ainsi, la piste peut être flexible jusqu'à ce point . fit-content () peut prendre n'importe quelle valeur de longueur, comme FR, PX, EM,% et Ch.

Par exemple, si nous définissons trois colonnes et le contenu de l'ajustement (120px), les largeurs de colonne seront réactives jusqu'à une largeur de 120px:

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

Voir le stylo CSS Grid Repeat (): fit-content () par SitePoint (@SitePoint) sur codepen.

en utilisant des lignes nommées avec répéter ()

Dans la disposition de la grille, les lignes verticales et horizontales autour des pistes sont numérotées par défaut. Lors de la définition de la grille-template-colonnes et des lignes de gilet de grille, nous pouvons donner des noms à ces lignes. Cela facilite la cible de ces lignes lorsque vous placez du contenu sur la grille (car nous n'avons pas à entrer et à compter les lignes de la grille).

Voici un exemple simple. Les lignes nommées sont les bits entre crochets ([]):

<span>grid-template-columns: repeat(5, 1fr);
</span>

Le code ci-dessus nous donne deux colonnes. La ligne de grille verticale la plus à gauche (numéro 1) est appelée «barre latérale», la ligne de grille moyenne (numéro 2) est appelée «start de contenu», et la ligne finale de la grille (numéro 3) est appelée «End-End».

Nous pouvons également utiliser des lignes nommées dans notre fonction répétée ():

<span>article {
</span>  <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>

Cela signifie que chacune de nos colonnes a maintenant une ligne à gauche appelée Yin et une ligne à droite appelée Yang.

Cela peut sembler plus difficile la vie si chaque ligne a le même nom, mais nous pouvons toujours les cibler individuellement. Par exemple:

• Nous pouvons cibler la première ligne de yin avec une colonne de grille: yin
• Nous pouvons cibler la deuxième ligne de yin avec une colonne de grille: yin 2
• Nous pouvons définir une colonne pour s'étendre sur trois lignes de la deuxième ligne de yin: grille-colonne: yin 2 / span 3
• Nous pouvons définir une colonne pour s'étendre du deuxième yin à la fin avec la grille-colonne: yin 2 / yang -1

Les lignes de dénomination dans Repeat () sont probablement les plus utiles où la répétition () est mélangée avec d'autres valeurs, comme ainsi:

<span>article {
</span>  <span>grid-template-columns: repeat(3, 1fr 2fr);
</span><span>}
</span>

Je ne vais pas approfondir les lignes nommées et comment les utiliser ici, car c'est un sujet distinct, mais vous pouvez en savoir plus sur les lignes de grille nommées sur MDN.

Utilisation de répétition () avec l'auto-ajustement et le remplissage automatique

Les mots clés automobiles et remplis automatiquement sont des alternatives à la définition d'un nombre fixe de pistes. Ils disent au navigateur d'adapter autant de pistes dans un espace donné que possible. Par exemple:

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

Voir le stylo CSS Grid Repeal (): Auto-ats et remplissage automatique par SitePoint (@SitePoint) sur codepen.

Dans la démo ci-dessus, les divs sont réglés sur une largeur de 150px, et ceux qui ne peuvent pas tenir sur une ligne tombent à la suivante. Si nous changeons automatiquement en passant automatiquement, nous ne verrons pas de différence, car dans ces conditions, ils font tous les deux la même chose. Les différences entre elles ne deviennent évidentes que dans des circonstances particulières.

À ce stade, l'auto-ajustement à la remplissage automatique est ok , mais rien de particulièrement flash. C'est quand ils sont combinés avec Minmax () et Min () que la vraie magie commence à se produire, alors regardons cela ensuite.

Utilisation de répétition () avec Auto-Fit / Auto-Fill, MinMax () et Min ()

Si vous n'êtes pas amoureux de la répétition (), la combinaison de répéter () avec l'auto-fit, Minmax () et Min () verra sûrement la flèche de Cupidon percer votre cœur têtu. Leur combinaison nous permet de créer des dispositions vraiment réactives sans utiliser de requêtes multimédias.

en utilisant l'auto-fit et miNMax () avec répéter ()

Considérez le CSS suivant:

<span>grid-template-columns: repeat(5, 1fr);
</span>

Dans cet exemple, Minmax () définit une largeur de colonne minimale de 200px et un maximum de 1FR. La démo ci-dessous montre cela en action.

Voir le stylo CSS Grid Repeal (): Auto-Fit et Minmax () par SitePoint (@SitePoint) sur codepen.

Chaque div doit mesurer au moins 200 pixes. S'il y a un espace supplémentaire vers la droite (moins de 200 pixels), les Divs se développent pour remplir l'espace. Si nous élargissons le navigateur, une autre div est ajoutée à la ligne une fois que 200 pixels d'espace sont disponibles. La même chose se produit à l'envers: à mesure que nous restreinons le navigateur, la dernière div de la ligne baissera une fois qu'il n'y aura pas au moins 200 pix d'espace pour qu'il puisse s'adapter. Et une fois qu'il a chuté, les div restants s'étendent pour remplir la ligne.

Encore une fois, si nous échangeons l'auto-ajustement pour un remplissage automatique, nous verrons le même comportement.

Il y a cependant une limitation avec cet exemple. Si nous rendons la fenêtre du navigateur suffisamment étroite, nous nous retrouverons avec une seule colonne. Alors que cette colonne devient plus étroite que 200px, les Divs commenceront à déborder leur conteneur.

Nous pouvons empêcher ce débordement de se produire en apportant Min () dans le mélange, alors regardons cela ensuite.

en utilisant l'auto-fit, Minmax () et Min () avec répéter ()

Nous pouvons contrôler ce qui se passe à petites largeurs en introduisant Min (). Mettons à jour notre code pour ressembler à ceci:

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

Maintenant, il existe deux options pour la largeur de colonne minimale. Le navigateur choisira le plus petit . Une fois que la colonne est plus étroite que 200px, 100% est la plus petite valeur, donc elle prévaut. Et cela signifie que la colonne unique restante est désormais définie sur la largeur: 100%, elle continuera donc de s'intégrer bien dans son conteneur à des largeurs décroissantes. (Pressez la fenêtre du navigateur aussi loin que possible pour le voir en pratique.)

Voir le stylo CSS Grid Repeat (): Minmax () et Min () par SitePoint (@SitePoint) sur codepen.

Pour une démonstration plus réelle de l'utilisation de répétitions () avec Auto-Fit, Minmax () et Min (), consultez la démo de code de code suivante d'une galerie d'images réactive. Cette démo utilise également la propriété Aspect-Ratio, que nous avons couverte dans la façon d'utiliser le rapport d'aspect CSS.

Voir le stylo Galerie d'images réactive utilisant un rapport d'aspect par SitePoint (@SitePoint) sur codepen.

Comprendre la différence entre l'auto-ats et le remplissage automatique

Dans les exemples que nous avons vus jusqu'à présent, il ne semble y avoir aucune différence entre l'auto-ajustement et le remplissage automatique. La différence n'apparaît que dans certaines situations, que nous couvrirons brièvement maintenant.

Nous allons supprimer notre démo html pour qu'il n'y ait que quatre divs, et définirons le CSS suivant:

<span>grid-template-columns: repeat(5, 1fr);
</span>

L'image ci-dessous montre ce que nous obtenons avec le remplissage automatique.

Le navigateur calcule le nombre de divs pourrait s'adapter au conteneur et leur laisse de l'espace. Chacun des divs existants a une largeur de 110px, tout comme les espaces gauche à droite.

Passons à l'auto-ajustement:

<span>article {
</span>  <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>

L'image ci-dessous montre ce que nous obtenons avec l'auto-ajustement.

Avec l'auto-ajustement, le navigateur calcule également l'espace pour plus de divs, mais effondre ensuite cet espace jusqu'à la largeur zéro et permet aux divs existants de se développer pour occuper tout l'espace. Dans l'image ci-dessus, vous pouvez voir que la ligne de colonne d'extrémité est toujours numérotée 8. Le 8 est empilé au-dessus des lignes de grille 7, 6 et 5.

Alors, que devons-nous faire de tout cela? De façon réaliste, dans la plupart sinon toutes les circonstances, nous voulons utiliser l'auto-ajustement, car nous ne voulons pas souvent que l'espace reste vide lorsque nous pourrions l'utiliser pour notre contenu.

Vous pouvez jouer avec l'auto-ajustement et le remplissage automatique dans cette démo Codepen. Essayez de changer automatiquement en passant automatiquement, et élargissez et contractez le navigateur pour voir comment ils se comportent tous les deux.

des choses utiles à savoir sur la répétition ()

Comme indiqué ci-dessus, la fonction Repeat () peut être utilisée dans le cadre d'une déclaration plus longue avec des colonnes de remplaçant de grille et des lignes de flux de grille. La plupart des amis que nous avons rencontrés ici - des unités de longueur, du contenu min, du contenu max, de l'auto, du minmax (), du content fit-content () et des lignes nommées - fonctionnent à côté de répéter () ainsi que à l'intérieur. (Vous pouvez voir des exemples d'entre eux en travaillant avec des colonnes de remplaçant de grille et des lignes de templice sur MDN.)

Certaines combinaisons ne sont pas autorisées pour l'argument de la piste. Par exemple, nous ne pouvons pas utiliser quelque chose comme répéter (remplissage automatique, 1FR). Les unités automobiles et flexibles ne peuvent pas jouer ensemble, car nous avons besoin d'une mesure fixe quelque part, comme Minmax (100px, 1FR).

Comme nous l'avons vu, la fonction Minmax () peut avoir une fonction Min () ou Max () imbriquée. Il peut également contenir l'un des contenus Auto, Min, contenu maximum, mais pas deux. Par exemple, nous pourrions utiliser Minmax (50px, max-contenu), mais pas Minmax (Min-Content, Max-Content) (bien que, pour être honnête, j'ai trouvé que certaines de ces combinaisons font semblent fonctionner de toute façon).

La notation répétée () ne peut pas être imbriquée. Nous ne pouvons donc pas avoir une répétition () dans une répétition (). Mais nous pouvons certainement avoir des fonctions répétées () côte à côte - comme la répétition (5, 1FR) 100px répéter (2, 50px).

Envelopper

La fonction répéter () est un outil incroyablement utile pour disposer efficacement des motifs de répétition des colonnes et des lignes de grille. Il peut être utilisé pour créer des dispositions entièrement réactives sans requêtes multimédias dans une seule ligne de code.

Dans la plupart des cas, vous n'aurez pas besoin de vous éloigner trop dans les mauvaises herbes avec répéter (). Sa caractéristique la plus impressionnante est résumé dans un exemple de base comme celui-ci:

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

Assurez-vous de garder cette ligne de code dans votre poche arrière, car elle sera très pratique.

Vous pouvez en savoir plus sur la fonction répéter () ici:

• la page répéter () sur mdn
• La section répéter () de la spécification du module de mise en page de la grille W3C

Pour une introduction plus générale à la disposition de la grille CSS, voir une introduction aux dispositions de grille CSS.

Questions fréquemment posées (FAQ) sur la fonction de répétition de la grille CSS

Quelle est la différence entre l'utilisation de la fonction de répétition et la spécification manuelle des pistes de grille dans la grille CSS?

La fonction de répétition dans la grille CSS est une méthode raccourci pour définir plusieurs pistes de grille de la même taille. Au lieu de spécifier manuellement chaque piste, vous pouvez utiliser la fonction de répétition pour définir le nombre de pistes et leur taille en une seule fois. Cela rend votre code plus propre et plus facile à lire. Par exemple, au lieu d'écrire «Grid-Template-Colonnes: 100px 100px 100px 100px;», vous pouvez simplement écrire «Grid-Template-Colonnes: répéter (4, 100px);». Les deux codes créeront une grille avec quatre colonnes chacune de la largeur de 100px.

Puis-je utiliser la fonction de répétition avec différentes tailles de piste?

Oui, vous pouvez utiliser la fonction de répétition avec différentes tailles de piste. La fonction de répétition accepte deux arguments: le nombre de répétitions et la taille de la piste. Si vous souhaitez créer une grille avec des pistes de différentes tailles, vous pouvez utiliser la fonction de répétition plusieurs fois dans la même propriété. Par exemple, «Grid-Template-Colonnes: répéter (2, 100px) répéter (3, 200px);» Créera une grille avec deux colonnes de 100px et trois colonnes de 200px.

Comment le mot-clé automatique fonctionne-t-il avec la fonction de répétition?

Le mot-clé automatique est utilisé avec la répétition Fonction pour remplir automatiquement le récipient de grille avec autant de pistes que possible. La taille des pistes est spécifiée comme le deuxième argument de la fonction de répétition. Si la taille du conteneur dépasse la taille totale des pistes, l'espace restant sera réparti également entre les pistes. Par exemple, «Grid-Template Columns: répéter (remplissage automatique, 100px);» Créera autant de colonnes 100px que possible dans le conteneur.

Puis-je utiliser la fonction de répétition avec des unités fractionnaires (FR)?

Oui, la fonction de répétition peut être utilisée avec des unités fractionnées ( Fr). L'unité FR représente une fraction de l'espace disponible dans le récipient de grille. Par exemple, «Grid-Template Columns: Repeat (3, 1FR);» Créera une grille avec trois colonnes qui occupent chacune un tiers de la largeur du conteneur.

Comment le mot-clé automatique fonctionne-t-il avec la fonction de répétition?

Le mot-clé automatique est utilisé avec la fonction répétée pour créer une disposition de grille réactive. Il fonctionne de manière similaire à la remplissage automatique, mais il efface les pistes vides. Cela signifie que s'il n'y a pas assez de contenu pour remplir toutes les pistes, les pistes restantes s'étendront pour occuper l'espace disponible. Par exemple, «Grid-Template-Connens: répéter (Auto-Fit, Minmax (100px, 1FR));» Créera autant de colonnes 100px que possible dans le conteneur, et tout espace restant sera distribué entre les colonnes.

Puis-je utiliser la fonction de répétition avec la fonction Minmax?

Oui, la fonction de répétition peut être utilisée avec la fonction Minmax. La fonction Minmax définit une plage de taille supérieure ou égale au minimum et inférieur ou égal au maximum. Par exemple, «Grid-Template Columns: répéter (3, Minmax (100px, 1fr));» Créera une grille avec trois colonnes qui ont chacune une largeur minimale de 100px et une largeur maximale de 1FR.

Que se passe-t-il si j'utilise la fonction de répétition avec un nombre négatif?

Si vous utilisez La fonction de répétition avec un nombre négatif, le navigateur ignorera la règle et la grille ne sera pas créée. La fonction de répétition accepte uniquement les entiers positifs comme le nombre de répétitions.

Puis-je utiliser la fonction de répétition avec des valeurs de pourcentage?

Oui, vous pouvez utiliser la fonction de répétition avec des valeurs de pourcentage. Le pourcentage est calculé par rapport à la taille du récipient de grille. Par exemple, «Grid-Template Columns: répéter (2, 50%);» Créera une grille avec deux colonnes qui occupent chacune la moitié de la largeur du conteneur.

Puis-je utiliser la fonction de répétition avec la propriété Grid-Template-Rows?

Oui, la fonction de répétition peut être utilisé avec la propriété des lignes de tempête de grille pour définir la taille des lignes de grille. La syntaxe est la même que avec les colonnes de la grille-template. Par exemple, «Grid-Template-Rows: Repeat (3, 100px);» Créera une grille avec trois lignes chacune de 100px de hauteur.

Puis-je utiliser la fonction de répétition avec les requêtes multimédias?

Oui, la fonction de répétition peut être utilisée avec des requêtes multimédias pour créer des dispositions de grille réactives . Vous pouvez définir différentes dispositions de grille pour différentes tailles d'écran en utilisant la fonction de répétition dans une requête multimédia. Par exemple, vous souhaiterez peut-être afficher deux colonnes sur de petits écrans et quatre colonnes sur de grands écrans. Cela peut être réalisé avec le code suivant:
@media (max-largeur: 600px) {
.grid {
grid-template-colonnes: répéter (2, 1fr);
}
}
@media (min-width: 601px) {
.grid {
grid-template-columns: repeat (4, 1fr);
}
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!