Salut à tous, c'est Sahaza.
Si vous avez déjà passé des heures à écrire des Media Queries complexes pour faire passer une grille de 4 à 3 puis 2 colonnes, vous allez adorer ce snippet. CSS Grid n'est pas seulement puissant ; il est autonome.
Aujourd'hui, je vous donne le code qui vous permet de créer une grille entièrement responsive, où les colonnes s'ajustent, se compressent et se décalent automatiquement, le tout sans écrire la moindre ligne de @media (max-width: XXXpx). C'est magique, et ça s'appelle la combinaison repeat(), auto-fit/auto-fill et minmax().
Préparez-vous à jeter vos vieilles méthodes au placard. Voici le snippet :
Le Snippet : Grille Auto-Responsive en 3 Lignes
Voici le code essentiel à appliquer à votre conteneur parent (la grille) :
.responsive-grid-container {
/* 1. Activer le mode Grille */
display: grid;
/* 2. Le cœur de la réactivité */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
/* 3. Ajouter de l'espace entre les éléments */
gap: 24px;
}
C'est tout. Collez ça sur votre `div` principale, mettez des cartes à l'intérieur, et regardez la magie opérer lorsque vous redimensionnez la fenêtre.
Analyse Technique : Décryptage du `repeat()`
Toute la puissance réside dans cette ligne : grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
1. `repeat(X, Y)`
La fonction repeat() est une façon concise de définir plusieurs colonnes identiques.
2. `auto-fit` vs `auto-fill` (La différence cruciale)
C'est ici que l'intelligence de la grille entre en jeu. On dit au navigateur de créer **autant de colonnes que possible**.
- **`auto-fill`** : Crée autant de colonnes que possible, y compris des colonnes **vides**. Il maintient l'espace alloué même si les colonnes ne sont pas remplies d'éléments.
- **`auto-fit`** : C'est généralement celui que vous voulez. Il crée autant de colonnes que possible, puis **écrase toutes les colonnes vides** et permet aux colonnes existantes de s'étendre pour occuper l'espace libéré. C'est parfait pour un layout de cartes.
3. `minmax(280px, 1fr)` (La Flexibilité)
C'est le garde-fou qui évite le dépassement et l'écrasement :
- **`280px` (min)** : C'est la taille minimale de chaque colonne. Si l'espace disponible est inférieur à 280px pour chaque colonne, la grille passera à une ligne inférieure. C'est l'équivalent de votre breakpoint mobile.
- **`1fr` (max)** : C'est l'unité de fraction. Elle dit à la colonne de prendre toute la largeur restante disponible. Si vous avez de l'espace, les colonnes s'étendent équitablement.
Exemple Pratique : Le Layout de Cartes
Imaginons que vous ayez une liste de cartes de snippets. Avec cette structure, voici ce qui se passe automatiquement :
- **Grand écran (Desktop) :** Le navigateur trouve de la place pour 4 colonnes de 280px. L'unité `1fr` permet à chaque colonne de s'étendre légèrement pour remplir l'espace restant.
- **Écran Moyen (Tablette) :** L'écran ne peut contenir que 3 colonnes de 280px. La 4ème colonne est automatiquement poussée à la ligne suivante. Les 3 colonnes restantes utilisent l'espace `1fr`.
- **Petit écran (Mobile) :** L'écran est trop petit pour contenir deux colonnes de 280px. La grille passe automatiquement à une seule colonne de 100% (grâce à l'unité `1fr`), occupant toute la largeur disponible.
Alternative Tailwind CSS
Si vous utilisez Tailwind (ce qui est le cas de ce thème !), vous n'avez besoin que d'une seule classe utilitaire (bien qu'elle soit longue) :
Malheureusement, l'expression `repeat(auto-fit, minmax(X, 1fr))` n'est pas intégrée nativement dans Tailwind et doit être injectée via le style en ligne ou la configuration pour le moment, mais c'est le prix à payer pour une réactivité parfaite sans Media Queries.
Ce snippet est une des clés d'une architecture Frontend performante. Adoptez la logique `minmax` et `auto-fit` et vous ne reviendrez jamais aux breakpoints manuels.
À bientôt pour plus de code propre !
Sahaza.