Discussion :

[TalRino]

Merci de ta réponse, j'ai lu effectivement le sujet avant de poster mais sur ce que tu as fait je comprends pas encore certaine ligne de css que tu utilise comme "nth-child" ou encore ta façon d'utiliser le CSS ".grid-oeil-sauron > div:nth-child(1) > div:nth-child(1),"

Je n'ai que les bases, je pratique pas encore et ma formation commence le 25 Février. Il n'y a pas un moyen de faire en sorte que mon code soit responsive plutôt afin que ça soit plus compréhensif pour moi ?

[Invité]

1- Il suffit que tu fasses une recherche : "CSS :nth-child"
Ça simplifie le code HTML, mais "complique" le code CSS.

Ça permet de définir les "cases" qui doivent avoir telle ou telle couleur (en fonction de leur "position" dans la grille).

Un des avantages est de pouvoir, avec le MEME code HTML, de créer des motifs différents, en modifiant simplement le code CSS.
On peut aussi faire des animations sympas en CSS : https://codepen.io/jreaux62/pen/YONMJj


2- Cela dit, tu peux aussi t'en sortir très bien avec ce que tu as fait, avec les classes CSS : .noir, .gris,...
C'est alors l'inverse :
Ça simplifie le code CSS, mais "complique" le code HTML.

L'inconvénient est alors de "figer" le motif.
Pour créer un autre motif, il faut modifier le code HTML (appliquer les classes à d'autres "cases" de la grille).

C'est un (autre) choix.


3- Pour info.

• (version 1) L'image transparente carrée permet de garder la forme carrée des cases, en "responsive" (en redimensionnant la fenêtre).
• Sinon (version 2), il faut passer par JavaScript pour adapter la hauteur des cases en fonction de leur largeur.
• Quant à .grid-oeil-sauron > div:nth-child(3) > div:nth-child(7) { ... } : ça définit la case de la rangée 3, colonne 7.