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.
Tout est dans le titre
Attention l'article ne parle que de la "théorie" derrière les grilles
Tout est dans le titre... Flexbox sans flexbox :-) (via 4design.xyz/des-liens-pour-integrateur-front-end )
Un tuto impressionnant : créer une grille responsive avec le minimum de classes CSS...
Intéressant, l'auteur explique les différentes méthodes pour supprimer l'espace indésirable qui apparaît entre 2 blocs "inline-block"
Un snippet Sass sympa pour construire sa grille