L’arrivée de CSS Grid a radicalement changé la donne. Grâce à la combinaison de la fonction repeat(), du mot-clé auto-fit et de la fonction minmax(), il est désormais possible de créer des grilles qui s’adaptent intelligemment à la largeur de l’écran sans écrire une seule ligne de Media Query. Le navigateur calcule lui-même le nombre optimal de colonnes en fonction de l’espace disponible.
Le moteur de la flexibilité : La fonction repeat()
La fonction repeat() permet d’éviter la répétition fastidieuse de valeurs dans les propriétés grid-template-columns ou grid-template-rows. Au lieu d’écrire 1fr 1fr 1fr, on écrit repeat(3, 1fr).
Détails techniques de la syntaxe repeat() :
- Premier argument (le nombre ou le mode) : n
- Un nombre entier (ex:
3) : Définit un nombre fixe de répétitions. auto-fill: Remplit la ligne avec autant de colonnes que possible, même si elles sont vides.auto-fit: Remplit la ligne avec autant de colonnes que possible, mais collapse les colonnes vides pour étendre les colonnes existantes.
- Un nombre entier (ex:
- Deuxième argument (la taille de la piste) : Définit la largeur de chaque colonne répétée. Cela peut être une unité fixe (
px), relative (%,vw), flexible (fr) ou une fonction commeminmax().
Le contrôle des dimensions : La fonction minmax()
Pour que le mode auto-fit fonctionne, le navigateur a besoin de savoir quelle est la taille minimale acceptable pour une colonne avant qu’il ne décide d’en réduire le nombre et de passer à la ligne. C’est ici qu’intervient minmax().
La fonction minmax(min, max) définit une plage de taille pour une piste de grille. La colonne ne sera jamais plus petite que le minimum, et jamais plus grande que le maximum.
Analyse des paramètres de minmax() :
| Paramètre | Description | Exemples valides |
|---|---|---|
| min | La valeur minimale en dessous de laquelle la colonne ne peut pas descendre. Si l’espace est insuffisant, la grille crée une nouvelle ligne. | 200px, 15rem, min-content |
| max | La valeur maximale que la colonne peut atteindre. Elle permet à la colonne de s’étirer pour remplir l’espace vide. | 1fr, 500px, max-content |
Mise en pratique : le combo magique
L’implémentation la plus puissante pour un layout responsive consiste à combiner ces trois concepts dans une seule ligne de CSS :
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}Décortiquons ce qui se passe réellement ici :
- auto-fit : le navigateur regarde la largeur totale du container. Il se demande : « Combien de colonnes de minimum 250px puis-je placer ici ? ».
- minmax(250px, 1fr) :
- Si le container fait 1000px, il place 4 colonnes (4 x 250px).
- Si le container fait 600px, il ne peut plus placer 3 colonnes (3 x 250 px = 750 px), donc il n’en place que 2.
- Le
1frforce ensuite ces colonnes à s’étirer pour occuper tout l’espace restant, évitant ainsi d’avoir un vide blanc à droite du container.
auto-fill vs auto-fit : Quelle différence ?
C’est l’un des points les plus confus pour les développeurs. La différence n’est visible que lorsque vous avez moins d’éléments que l’espace disponible ne peut en contenir.
| Caractéristique | auto-fill | auto-fit |
|---|---|---|
| Comportement | Crée des colonnes vides pour remplir l’espace. | Collapse les colonnes vides et étire les colonnes remplies. |
| Rendu visuel | Les éléments gardent leur taille min/max, laissant un vide à droite. | Les éléments s’étirent pour remplir toute la largeur. |
| Cas d’usage | Grilles de produits strictes où la taille doit être constante. | Galeries, portfolios ou tableaux de bord modernes. |
Voici un exemple concret pour illustrer la différence :
/* Avec auto-fill : si j'ai 2 cartes sur un écran de 1200px,
elles feront 250px et laisseront un grand vide à droite */
.grid-fill {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
/* Avec auto-fit : si j'ai 2 cartes sur un écran de 1200px,
elles s'étireront pour faire environ 600px chacune */
.grid-fit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}Entraînez vous !
modifiez depuis le css etvoyze la difference.
See the Pen Untitled by upstart.re (@gav974) on CodePen.
Optimisations et bonnes pratiques
Pour rendre votre grille parfaite, ne négligez pas les propriétés complémentaires :
Le gap (l’espacement) : utilisez gap (ou column-gap et row-gap) pour aérer vos éléments. Contrairement aux marges, le gap ne s’ajoute pas sur les bords extérieurs du container, ce qui simplifie grandement les calculs de largeur.
L’alignement : utilisez justify-content: center sur le container si vous souhaitez que vos éléments soient centrés lorsque l’espace restant est trop petit pour une nouvelle colonne mais trop grand pour être ignoré.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
justify-content: center;
align-items: start;
}L’adoption de auto-fit et minmax() marque une transition vers un CSS plus intelligent et moins déclaratif. En déléguant la gestion du responsive au moteur de rendu du navigateur, vous réduisez drastiquement la quantité de code CSS et facilitez la maintenance de vos interfaces sur le long terme.
Avez-vous encore le réflexe d’utiliser des Media Queries pour vos grilles, ou avez-vous basculé vers CSS Grid ? Dites-le nous en commentaire !
