Auto-fit et auto-fill avec minmax
Créez automatiquement un nombre réactif de colonnes avec auto-fit et auto-fill associés à minmax().
Auto-fit et auto-fill avec minmax 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.
La grille à adaptation automatique
Le modèle CSS Grid le plus puissant : une grille entièrement réactive qui ajuste automatiquement le nombre de colonnes sans aucune requête média, en combinant auto-fit ou auto-fill avec minmax().
auto-fill
auto-fill remplit la ligne avec autant de colonnes que possible à la taille minimale indiquée. Les colonnes vides sont conservées sous forme de pistes vides à la fin.
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>auto-fit
auto-fit fonctionne comme auto-fill, mais réduit les pistes vides à une largeur nulle. Les éléments existants s’étirent pour remplir l’espace restant.
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>Différence entre auto-fill et auto-fit
La différence ne compte que lorsqu’il y a moins d’éléments que nécessaire pour remplir la ligne :
auto-fill: les pistes de colonnes vides restent présentes et les éléments ne s’étirent pas pour remplir l’espaceauto-fit: les pistes vides se réduisent et les éléments s’agrandissent pour remplir toute la largeur disponible
auto-fit avec minmax()
Le célèbre modèle de grille réactive : les éléments mesurent au moins 250px de large, s’agrandissent pour remplir l’espace et passent automatiquement sur de nouvelles lignes :
<div class="responsive-grid">
<div>Card 1</div><div>Card 2</div><div>Card 3</div>
</div>Explication de minmax()
minmax(min, max) définit une plage de taille pour une piste. La piste ne sera ni plus petite que min, ni plus grande que max. Combiné avec fr, ce modèle crée des pistes flexibles limitées par une valeur minimale.
<div class="track"><div>Flexible track</div></div>auto-fill avec minmax pour des éléments de taille fixe
Lorsque vous souhaitez que les éléments aient une taille fixe et qu’un espace vide soit autorisé à la fin :
<div class="icon-grid">
<div>🔧</div><div>⚙</div><div>🔨</div>
</div>Réactivité sans requêtes média
Il s’agit du principal avantage : repeat(auto-fit, minmax(280px, 1fr)) s’adapte automatiquement, d’une colonne sur mobile à autant de colonnes que possible sur les écrans plus grands :
<div class="cards">
<div>Card A</div><div>Card B</div>
</div>min() pour un minmax plus sûr
Évitez les problèmes de mise en page dans les conteneurs très petits en utilisant min(100%, 280px) comme valeur minimale plutôt qu’une valeur brute en pixels :
<div class="grid"><div>Item</div></div>auto-fill pour un alignement de type maçonnerie
Avec auto-fill, les pistes vides à la fin préservent l’alignement lorsque le nombre d’éléments n’est pas un multiple du nombre de colonnes — ce qui est utile pour obtenir des grilles cohérentes.
Dimensionnement intrinsèque de la grille par rapport à Flexbox
flex-wrap + flex: 1 1 250px avec Flexbox produit un résultat similaire, mais ne garantit pas des largeurs de colonnes égales : les éléments peuvent s’étirer de manière inégale. Avec minmax, la grille garantit des pistes parfaitement uniformes.
Vérification rapide
Quelle valeur de grille crée des colonnes réactives sans requêtes média en réduisant les pistes vides afin que les éléments remplissent l’espace disponible ?
Récapitulatif
repeat(auto-fit, minmax(250px, 1fr)) est le modèle de grille réactive le plus puissant : aucune requête média n’est nécessaire. auto-fit réduit les pistes vides afin que les éléments remplissent la ligne. auto-fill conserve les pistes vides pour garantir un alignement cohérent. Associez toujours ce modèle à gap pour créer les espacements.
Apprends CSS avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 40
- Leçons
- 159
Questions Fréquemment Posées
La leçon « Auto-fit et auto-fill avec minmax » est-elle gratuite ?
Oui — le texte complet de « Auto-fit et auto-fill avec minmax » 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 « Auto-fit et auto-fill avec minmax » ?
Créez automatiquement un nombre réactif de colonnes avec auto-fit et auto-fill associés à 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 2 sur 4.
Combien de temps prend la leçon « Auto-fit et auto-fill avec minmax » ?
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
- Lignes et zones de grille nommées
- Auto-fit et auto-fill avec minmax
- Grille implicite et Grid-Auto-Flow
- Subgrid pour aligner le contenu imbriqué