Aligner un catalogue de produits avec CSS Subgrid

Dans notre précédent tutoriel sur les bases du Subgrid, nous avons exploré comment hériter des lignes d'une grille parente. Passons à la pratique avec un défi classique : créer une grille de produits harmonieuse malgré des images aux ratios différents et des descriptions de longueurs variables.

Le problème : Le "Layout brisé"

Sans Subgrid, si le produit A a une description de deux lignes et le produit B une seule ligne, le bouton "Ajouter au panier" se retrouve décalé. Visuellement, cela crée un effet "escalier" peu professionnel.

1. La Structure HTML Sémantique

Pour ce catalogue, nous utilisons la balise <article> pour chaque fiche produit. Elle contient quatre éléments distincts qui devront s'aligner parfaitement sur chaque colonne.

<div class="product-wrapper">
  <article class="product-card">
    <div class="image-container">
      <img src="produit-1.jpg" alt="Nom du produit">
    </div>
    <h3>Smartphone Galaxy S24</h3>
    <p>Le dernier cri de la technologie avec écran AMOLED.</p>
    <button class="btn">Acheter - 899€</button>
  </article>
  <article class="product-card">
    <div class="image-container">
      <img src="produit-2.jpg" alt="Nom du produit">
    </div>
    <h3>Coque de protection</h3>
    <p>Protection ultra-résistante aux chocs et rayures, disponible en plusieurs coloris.</p>
    <button class="btn">Acheter - 29€</button>
  </article>
</div>

2. Le CSS : Créer l'ossature invisible

Ici, nous définissons une grille parente avec quatre rangées distinctes. C'est cette structure qui servira de guide à toutes nos vignettes.

.product-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-template-rows: 250px auto 1fr auto;
  gap: 30px;
}
.product-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  border: 1px solid #eee;
  padding: 15px;
  background: #fff;
}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain; 
}

3. Pourquoi cette méthode change tout ?

Grâce à grid-template-rows: subgrid, les quatre éléments de chaque carte communiquent entre eux à travers les colonnes :

• Alignement des titres : Même si une image est plus étroite, le titre commence toujours à la même ligne (la ligne n°2 de la grille parente).

• Harmonie des boutons : La troisième rangée (1fr) va s'ajuster sur la description la plus longue de la rangée. Conséquence : tous les boutons "Acheter" seront parfaitement alignés sur la ligne n°4.