Créer des vignettes carrées avec CSS Grid

L'ère du CSS intelligemment responsive

Dans le développement web moderne, créer des interfaces qui s'affichent impeccablement sur des milliers de tailles d'écran différentes est un défi constant.

Ce tutoriel vous propose une solution élégante et puissante à deux problèmes courants :

1. Garantir la forme carrée (1:1) : Les vignettes et cartes (cards) sont souvent utilisées pour afficher du contenu important (icônes, photos, etc.). Leur format doit rester précis, peu importe leur taille.

2. Gérer la responsivité sans effort : Traditionnellement, adapter le nombre de colonnes d'une grille à la taille de l'écran nécessitait de longs blocs de Media Queries.

Nous allons exploiter les meilleures pratiques de CSS Grid et la propriété aspect-ratio pour créer une galerie de vignettes qui s'adapte parfaitement à toutes les tailles d'écran sans utiliser de Media Queries. Vous apprendrez à faire travailler le navigateur pour vous, en lui demandant de calculer et d'ajuster automatiquement la mise en page. Ce résultat est un code plus court, plus propre et intrinsèquement plus performant.

1. Structure HTML de la galerie

La structure reste simple : un conteneur (galerie-vignettes) pour la grille et des éléments enfants (vignette) pour chaque carte.

<div class="conteneur-principal">
    <h1>Créer des Vignettes Carrées (Cards) avec CSS Grid et aspect-ratio</h1>
    <p>Cette grille est entièrement responsive grâce à <code>auto-fit</code> et <code>minmax</code>.</p>

    <div class="galerie-vignettes">
        <div class="vignette">
            <h3>Vignette N°1</h3>
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        </div>
</div>

2. Mise en place de la grille responsives

C'est ici que nous appliquons la technique moderne pour gérer le responsive. Nous n'avons besoin que d'une seule règle !

.galerie-vignettes {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

Explication de minmax(250px, 1fr) :

• auto-fit : Dit à la grille de créer autant de colonnes que possible.

• minmax(250px, 1fr) : Chaque colonne doit faire au moins 250 pixels. Si l'espace est plus grand, elle s'étire pour occuper une fraction égale (1fr) de l'espace restant. Si la fenêtre devient trop petite pour maintenir la colonne à 250px, l'élément passe automatiquement à la ligne suivante.

3. Rendre les vignettes carrées et centrer le contenu

Ces étapes restent inchangées et sont essentielles pour la forme et la présentation.

A. Forme carrée (aspect-ratio)

.vignette {
    aspect-ratio: 1 / 1; 
    background-color: #007bff;
    color: white;
}

B. Centrage du contenu (Flexbox)

.vignette {
            aspect-ratio: 1 / 1;
            background-color: #007bff;
            color: white;
            padding: 1rem;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 123, 255, 0.2);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            min-height: 0;
            overflow: hidden;
        }
.vignette h3 {
            margin: 0 0 0.5rem 0;
            font-size: 1.2rem;
}

.vignette p {
            margin: 0;
            font-size: 0.9rem;
            opacity: 0.9;
}

Puissance et modernité du CSS

Vous avez créé une galerie de vignettes carrées entièrement responsive en utilisant les meilleures fonctionnalités du CSS moderne.

Grâce à :

• aspect-ratio: 1 / 1 : Vous avez résolu le problème historique de la création d'éléments carrés de manière simple et native.

• CSS Grid avec auto-fit et minmax() : Vous avez rendu la mise en page adaptative et flexible sans avoir recours à de lourdes Media Queries. Votre grille calcule elle-même le nombre optimal de colonnes en fonction de l'espace disponible.

Cette approche vous garantit une galerie robuste, performante et facile à maintenir, peu importe l'appareil utilisé par l'utilisateur.

 Voir un exemple sur codepen