Galerie CSS Grid Réactive

En combinant display: grid et grid-template-columns: repeat(auto-fit, minmax(..., 1fr)), il est possible de créer une galerie d’images parfaitement réactive. Le nombre de colonnes s’ajuste automatiquement à la largeur de l’écran, sans même avoir besoin d’écrire la moindre requête multimédia (@media).

Aperçu

Cas d’utilisation et caractéristiques

• Portfolios et galeries photo : Idéal pour mettre en valeur des images de manière élégante et structurée.
• Grilles de produits e-commerce : Parfaitement adapté pour aligner des cartes de présentation d’articles.
• Zéro media query : L’utilisation judicieuse de auto-fit et minmax allège considérablement le code, facilitant ainsi sa maintenance.

Points clés de l’UX/UI

• Format d’image fixe : En associant aspect-ratio: 1 / 1 à object-fit: cover, on garantit une grille de carrés uniforme et harmonieuse, peu importe les proportions des images d’origine.
• Effets de survol (Hover) : Une légère animation de soulèvement (transform: translateY et scale) assortie d’une ombre renforcée lors du passage de la souris indique clairement à l’utilisateur que l’élément est interactif.
• Transitions fluides : L’utilisation de cubic-bezier permet d’obtenir des animations douces et naturelles.

Guide de personnalisation

• Ajuster la largeur minimale : En modifiant la valeur 200px dans minmax(200px, 1fr), vous changez la taille minimale de chaque élément. L’augmenter réduira d’autant le nombre de colonnes affichées côte à côte.
• Modifier le format d’image : Passez simplement à 16 / 9 (format paysage) ou 3 / 4 (format portrait) pour adapter la disposition à vos besoins.

Code

<div class="gallery">
<img src="/gallery/1.png" alt="Gallery image 1" class="gallery-item" />
<img src="/gallery/2.png" alt="Gallery image 2" class="gallery-item" />
<img src="/gallery/3.png" alt="Gallery image 3" class="gallery-item" />
<img src="/gallery/4.png" alt="Gallery image 4" class="gallery-item" />
<img src="/gallery/5.png" alt="Gallery image 5" class="gallery-item" />
<img src="/gallery/6.png" alt="Gallery image 6" class="gallery-item" />
</div>

.gallery {
display: grid;
/* Ajuste automatiquement le nombre de colonnes pour remplir le conteneur, sans descendre en dessous de 200px */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
padding: 16px;
width: 100%;
box-sizing: border-box;
}

.gallery-item {
width: 100%;
/* Garde toujours une forme carrée */
aspect-ratio: 1 / 1;
/* Recadre pour ne pas déformer les proportions de l'image */
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
            box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}

.gallery-item:hover {
/* Effet de léger soulèvement au survol */
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
z-index: 10;
}

Compatibilité des navigateurs

• `display: grid et \aspect-ratio` sont pleinement supportés par tous les navigateurs modernes (Chrome, Firefox, Safari, Edge).
• Ces propriétés n’étant pas compatibles avec les anciens navigateurs (comme IE11), prévoyez une solution de repli (fallback) si nécessaire.