26243 shaares
Ce tutoriel explique comment utiliser CSS Subgrid pour aligner harmonieusement un catalogue de produits, même avec des images de ratios différents et des descriptions de longueurs variables. En créant une grille parente avec des rangées définies et en utilisant grid-template-rows: subgrid pour les éléments enfants, on assure un alignement parfait des titres et des boutons, évitant ainsi l'effet "escalier" peu professionnel. La solution propose une structure HTML sémantique avec des balises <article> pour chaque produit et un CSS qui définit une grille parente avec quatre rangées distinctes.