repeat() et minmax() dans Grid
Générez plusieurs pistes de grille et définissez des plages de tailles flexibles avec repeat() et minmax().
repeat() et minmax() dans Grid est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
repeat() dans le contexte de la grille
repeat(count, track-size) est une fonction CSS Grid qui génère plusieurs définitions de pistes sans répétition. Elle s’utilise dans grid-template-columns et grid-template-rows.
repeat() avec un nombre fixe
Créez quatre colonnes de même largeur :
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>repeat() avec un motif
Répétez un motif de pistes :
<div class="striped-grid">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
</div>minmax() dans les pistes
minmax(min, max) définit une plage de tailles pour une piste :
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>auto-fit avec minmax()
Le modèle de grille adaptative :
<div class="cards">
<div>Card A</div><div>Card B</div>
</div>minmax(min-content, max-content)
Les tailles de pistes peuvent utiliser des mots-clés de dimensionnement intrinsèque :
<div class="labels">
<div>Label</div><div>Value</div>
</div>minmax() dans les lignes
Utilisez minmax() pour les lignes afin de permettre une hauteur déterminée par le contenu, avec un minimum :
<div class="gallery"><div>1</div><div>2</div></div>fit-content() pour les colonnes
fit-content(max) rend une piste aussi large que son contenu, jusqu’à une limite maximale indiquée : comme max-content, mais avec un plafond :
<div class="layout"><div>Sidebar</div><div>Main</div></div>Combiner repeat() et des lignes nommées
Répétez des lignes nommées pour cibler chaque colonne par son nom :
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>auto-fill avec minmax pour des éléments de taille fixe
Lorsque les éléments ne doivent pas s’étirer au-delà de leur taille naturelle :
<div class="gallery">
<div>1</div><div>2</div><div>3</div>
</div>fr et pourcentages dans la grille
Contrairement aux pourcentages, les unités fr tiennent automatiquement compte de l’espace entre les pistes. repeat(3, 1fr) avec gap: 24px produit trois colonnes véritablement égales. Avec des pourcentages, il faudrait utiliser calc() pour soustraire l’espace entre les pistes.
Vérification rapide
Que définit repeat(3, minmax(100px, 1fr)) ?
Récapitulatif
repeat(count, track) génère plusieurs pistes sans répétition. minmax(min, max) définit des plages de tailles de pistes flexibles. Le modèle repeat(auto-fit, minmax(280px, 1fr)) est la grille adaptative la plus puissante : aucune requête média, et des colonnes automatiquement adaptatives. Utilisez fit-content(max) pour les colonnes de barre latérale qui s’adaptent au contenu.
Questions Fréquemment Posées
La leçon « repeat() et minmax() dans Grid » est-elle gratuite ?
Oui — le texte complet de « repeat() et minmax() dans Grid » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « repeat() et minmax() dans Grid » ?
Générez plusieurs pistes de grille et définissez des plages de tailles flexibles avec repeat() et minmax(). Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « repeat() et minmax() dans Grid » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- calc() pour les calculs dynamiques
- min(), max() et clamp() pour des valeurs fluides
- repeat() et minmax() dans Grid
- color-mix() et syntaxe des couleurs relatives