La création de mises en page de cartes propres et bien alignées est une tâche courante dans le développement web. Dans ce tutoriel, je vous guiderai à travers la construction d'une grille de quatre cartes par rangée. Chaque carte contient plusieurs blocs de contenu – un titre, une image, un prix, une liste à puces et un bouton d'appel à l'action (CTA) – alignés horizontalement dans la carte à l'aide de CSS Grid et de la puissante fonctionnalité CSS Subgrid. Ce que vous allez construire : - Une mise en page de grille de cartes (maximum 4 cartes par rangée). - Chaque carte contient plusieurs blocs de contenu alignés horizontalement. - Utilisation de CSS Grid pour la mise en page globale. - Utilisation de CSS Subgrid pour l'alignement interne du contenu à l'intérieur de chaque carte. Pourquoi utiliser CSS Subgrid ? CSS Subgrid est une fonctionnalité relativement nouvelle qui permet à une grille imbriquée d'hériter du dimensionnement des pistes de sa grille parente. Cela signifie que vous pouvez aligner le contenu interne parfaitement avec la grille externe sans avoir à calculer manuellement ou à dupliquer les tailles des pistes.