Grille d'images responsive avec Tailwind CSS Grid

Question

Voici la solution que j'ai faite :

Louis-Nicolas Leuillet · Accepted Answer

Ta solution est plutôt bonne ! Tu as bien compris le principe de la grille avec grid grid-rows-2 grid-cols-3 et le gap-10 pour l'espacement. Les images arrondies avec rounded-lg , c'est nickel aussi.
Par contre, attention avec w-7xl : la consigne demandait explicitement de donner une largeur maximale de 1280px et de centrer la grille grâce aux marges externes. Il fallait donc utiliser max-w-7xl (largeur maximale) combiné avec mx-auto (centrage horizontal via les marges).
La différence, c'est que w-7xl fixe une largeur exacte, ce qui peut provoquer des débordements sur des écrans plus petits, alors que max-w-7xl permet à la grille de s'adapter en ne dépassant jamais 1280px.
Pense donc à remplacer w-7xl par max-w-7xl et à ajouter mx-auto pour coller à ce qui était demandé. Sinon, c'est parfait :)

Grille d'images responsive avec Tailwind CSS Grid

Formation Apprendre Tailwind CSS v4 en 2026