Maîtriser l'alignement parfait avec CSS Subgrid

Avez-vous déjà lutté pour aligner des boutons ou des prix en bas de plusieurs vignettes de tarifs ? Traditionnellement, nous utilisions des min-height arbitraires ou du Flexbox complexe. En 2024/2025, la solution est arrivée : le CSS Subgrid.

1. Le Concept : Qu'est-ce que le Subgrid ?

Par défaut, une grille CSS ne concerne que les enfants directs. Le Subgrid permet à un élément enfant d'adopter la grille de son parent comme la sienne. Cela signifie que les colonnes et les lignes du parent deviennent accessibles à l'enfant, garantissant un alignement millimétré sur l'ensemble de votre mise en page.

2. La structure HTML

Pour notre exemple de cartes de tarifs, nous avons besoin d'une structure simple où chaque carte contient les mêmes sections (Titre, Liste, Prix).

<div class="pricing-wrapper">
  <article class="card">
    <h3>Plan Standard</h3>
    <ul>
      <li>Fonctionnalité A</li>
      <li>Fonctionnalité B</li>
    </ul>
    <div class="price">19€/mois</div>
  </article>
  </div>

3. Le code CSS (La solution moderne)

Le secret réside dans deux étapes : définir les lignes sur le parent, puis demander à l'enfant de s'y calquer.

.pricing-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto; 
  gap: 20px;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  border: 1px solid #ddd;
  padding: 20px;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

4. Pourquoi c'est une révolution ?

• Alignement dynamique : Si la liste de la carte n°2 s'allonge, la ligne de la grille s'agrandit pour toutes les cartes. Les prix restent donc toujours alignés horizontalement.

• Maintenance : Plus besoin de calculer des hauteurs en pixels.

• Performance : C'est du CSS natif, interprété ultra-rapidement par le navigateur.

Bonus : Optimiser avec LESS

Pour ceux qui utilisent un préprocesseur, nous pouvons automatiser cette logique avec un Mixin. Cela permet de réutiliser la logique de subgrid sur n'importe quel composant en une seule ligne.

.apply-subgrid(@count) {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span @count;
}

.card {
  .apply-subgrid(3);
  
  &:hover {
    transform: translateY(-8px);
  }
}

Le CSS Subgrid est l'outil ultime pour les interfaces en grille complexes. Il réconcilie le design rigoureux et le contenu dynamique.

Testez-le sur vos prochains projets de listes ou de tableaux de bord !

Voir un exemple sur codepen : Vignettes avec prix

Note : Avant de plonger dans les subtilités du Subgrid, il est indispensable d'avoir une bonne compréhension du module CSS Grid Layout standard. Le Subgrid repose entièrement sur les concepts de conteneur parent (display: grid), de définition de colonnes (grid-template-columns) et de placement d'éléments (grid-row). Si vous n'êtes pas encore à l'aise avec la création d'une grille classique, je vous recommande de vous familiariser avec ces bases, car le Subgrid n'est rien d'autre que l'art de faire hériter cette structure à vos éléments enfants.