Vous ne connaissez pas le concept à mon avis. Les éléments sont disposés dans la grille. La grille que vous avez définie explicitement dans vos déclarations CSS n’a que trois lignes (row) et une seule colonne (column). Vous avez neuf éléments (items) à disposer (3x3). La propriété CSS grid-auto-column spécifie la largeur des colonnes créées implicitement, en relation avec la déclaration grid-auto-flow: column. En supposant que grid-auto-flow: row; soit effective (ce n’est pas ce qui est recherché), les éléments h2, img et p auraient été placés dans les trois lignes de la seule colonne définie explicitement. Les autres éléments auraient été placés dans de nouvelles lignes créées implicitement. On appelle cela la grille implicite (implicit grid).

Le concept de grille est que le nombre d’éléments (ici, les articles) importe moins. On sait au préalable comment les éléments seront positionnés, c’est l’essentiel.

Je ne suis pas tellement convaincu par votre explication. En théorie, on pourrait définir la spécificité des règles CSS en appliquant des sélecteurs adéquats et en plaçant les déclarations CSS dans les règles appropriées. En cas de conflit dans les déclarations, il n’y a pas de surcharge, c’est par exemple la déclaration CSS la plus spécifique qui s’applique (le principe de la cascade : combiner des déclarations CSS). Je veux bien croire que les noms de classes sont exploités par des outils automatisés pour effectuer des analyses sémantiques mais je ne pense pas qu’en tant que tel les noms de classes aient véritablement un rôle sémantique (à mon avis, ce sont plutôt des indicateurs). Après, je pense que isolément, cela peut-être plus évident à lire avec des noms de classe spécifiques comme par exemple .article-preview, dans une feuille de style. Dans le fichier HTML, c’est moche (parce que superflu). Graphiquement, je ne sais pas si on ne perd pas en corrélation sur la complémentarité CSS / HTML. C’est juste une intuition, je ne sais rien sinon, car je n’ai pas d’expérience.