Unité fr et Repeat
Utilisez l’unité fractionnaire fr et la fonction repeat() pour créer des pistes de grille flexibles.
Unité fr et Repeat est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.
Qu’est-ce que l’unité fr ?
L’unité fr (fractionnaire) est propre à CSS Grid. Elle représente une fraction de l’espace libre restant dans le conteneur de grille, après le dimensionnement de toutes les pistes non flexibles.
Exemple simple avec fr
Deux colonnes de même largeur qui reçoivent chacune la moitié de l’espace disponible :
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Column 1 (1fr)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Column 2 (1fr)</div>
</div>Pistes mixtes
L’espace attribué à fr est calculé après soustraction des pistes fixes :
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px sidebar</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr column</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr column</div>
</div>Fractions inégales
Des valeurs fr différentes créent des colonnes proportionnelles :
<div class="thirds" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">25% (1fr)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">50% (2fr)</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">25% (1fr)</div>
</div>La fonction repeat()
repeat() évite de répéter la même taille de piste. Le premier argument indique le nombre de répétitions ; le second indique la taille de la piste.
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
</div>repeat() avec des pistes mixtes
Vous pouvez répéter un motif de pistes :
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1fr</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2fr</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">2fr</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">1fr</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">2fr</div>
</div>auto-fill
repeat(auto-fill, ...) crée autant de colonnes que possible dans le conteneur avec la taille indiquée. Les pistes vides sont conservées à la fin.
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">200px</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">200px</div>
</div>auto-fit
repeat(auto-fit, ...) fonctionne comme auto-fill, mais réduit les pistes vides, ce qui permet aux éléments existants de s’étirer pour remplir le conteneur.
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">min 200px, grows</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">min 200px, grows</div>
</div>minmax() dans repeat
minmax(min, max) définit une plage de tailles pour une piste. Associée à auto-fit, cette fonction crée une grille adaptative sans requêtes média :
<div class="responsive-grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Card A</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Card B</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Card C</div>
</div>fr et pourcentage
Contrairement aux pourcentages, fr exclut automatiquement l’espace des espacements. Avec 1fr 1fr et un espacement de 24px, vous obtenez deux colonnes de même largeur sans aucun calcul. L’équivalent en pourcentage serait calc(50% - 12px).
fr avec min-content et max-content
Combinez fr avec un dimensionnement fondé sur le contenu pour créer des mises en page mixtes :
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Label</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Flexible content area</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Action</div>
</div>Vérification rapide
Que crée repeat(auto-fit, minmax(200px, 1fr)) ?
Récapitulatif
L’unité fr répartit proportionnellement l’espace restant de la grille. repeat() évite les déclarations de pistes répétitives. Le puissant motif repeat(auto-fit, minmax(250px, 1fr)) crée des grilles de cartes entièrement adaptatives sans nécessiter de requêtes média.
Questions Fréquemment Posées
La leçon « Unité fr et Repeat » est-elle gratuite ?
Oui — le texte complet de « Unité fr et Repeat » 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 « Unité fr et Repeat » ?
Utilisez l’unité fractionnaire fr et la fonction repeat() pour créer des pistes de grille flexibles. 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 2 sur 4.
Combien de temps prend la leçon « Unité fr et Repeat » ?
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
- Display Grid et modèles de colonnes et de lignes
- Unité fr et Repeat
- Espacement et placement dans la grille
- Zones de modèle de grille