Utilisation de Subgrid en CSS

Dans cet article vous comprendrez ce que subgrid permet de résoudre au quotidien comme problème, et en faire un allié dans la conception de vos sites web ou de vos applications mobiles si elles utilisent cette technologie.

Prise en charge du navigateur

Avant de commencer mes explications, je tiens à souligner que le module subgrid est prise en charge dans Firefox v71+ et Safari Technology Preview. Nous pouvons l'utiliser comme une amélioration avec CSS @supports ou pour fournir une solution de secours.

Le problème

Supposons que nous ayons le design suivant sur deux colonnes (ou plus mais le principe est identique) : un titre, une description et une image. Lorsque le titre et le texte de description sont de longueur égale, les deux images s'alignent correctement.

Cependant, lorsque la description devient plus longue, elle pousse l'image vers le bas et par conséquent, les images ne sont plus alignées.

C'est là que la sous-grille CSS est utile ! Explorons la solution.

La solution : utiliser Subgrid

<div class="wrapper">
    <div class="item">
        <!-- Title, description, and image -->
    </div>
    <div class="item">
        <!-- Title, description, and image -->
    </div>
</div>

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}

.item {
    grid-row: 1 / 4;
}

Voici une explication visuelle de ce à quoi ressemble ce qui précède.

Vous pourriez penser que les lignes de la grille sont pour les éléments internes (titre, description et image). Cependant, ces lignes de grille sont pour le wrapper principal et seul l'élément .item peut y accéder. Cela signifie que le titre, la description et l'image ne sont pas pris en compte avec ces lignes.

Toujours pas convaincu ? Ici, j'ai ajouté deux lignes pour le texte de description et l'alignement s'est rompu.

.item {
    /* Assurez-vous que chaque élément s'étend de la ligne 1 à la ligne 4. */
    grid-row: 1 / 4;
    
    /* Crée un conteneur grid */
    display: grid;
    
    /* Appliquer la sous-grille Subgrid, revient à dire à .item d'hériter
     * de la grille Grid de .wrapper
     */
    grid-template-rows: subgrid;
}

Lors de l'utilisation subgrid, le but est de laisser .item hériter grid-template-columns de la valeur de son parent (.wrapper). Avec cela, la grille ressemblera à ceci.

Maintenant, chaque élément intérieur est placé dans une rangée. Cela signifie que si le contenu d'un élément interne s'allonge, sa ligne s'agrandira pour s'adapter au contenu.

Cette ligne est responsable des éléments enfants directs de l'élément .wrapper.

Un nouveau module CSS très utile qui nous fournira encore plus de moyens pour réaliser ce qui n'était pas possible auparavant avec la grille CSS 🙂

>> Vous avez terminé l'article sur le module Subgrid CSS
Article traduit de l'anglais, l'original est visible ici.