PhpBB Lab Académie

Vérifier l’usage des deux modèles sur les composants réels, contrôler leur portée et conserver le tableau, l’image et les pages simples sans grille superflue.

Le point de contrôle du chapitre Grid

Vous disposez maintenant d’une navigation Flexbox commune et d’une grille limitée aux deux notes de l’accueil. Cette leçon consolide leur intégration : aucune nouvelle propriété CSS n’est requise.

Ne créez pas de galerie de démonstration. Le résultat à contrôler est votre site réel de trois pages.

1. Expliquer pourquoi chaque outil a été choisi

Le menu regroupe trois liens que l’on organise principalement selon un axe : Flexbox exprime directement ce besoin. Les notes partagent des colonnes définies ensemble : Grid exprime cette structure.

Ce ne sont pas des interdictions : Flexbox peut revenir sur plusieurs lignes et Grid peut servir de petites dispositions. La question utile est de choisir le modèle qui décrit le besoin avec le moins de règles artificielles.

2. Contrôler la portée de la grille

Dans index.html, la classe grille-notes appartient au div qui contient les deux article. Le h2 Mes notes de progression reste avant ce div. Les sections Mon espace de travail et Les pages de mon site sont après la section de notes, pas dedans.

Les deux h3 doivent rester au niveau 3. La mise en colonnes n’autorise pas à les transformer en h2 pour agrandir leur texte.

3. Ne pas confondre grille CSS et tableau de données

Le tableau Rôle des trois pages principales continue à comparer Page, Fichier et Rôle. Gardez table, caption, les en-têtes th et leurs scope. Notre règle display: grid est limitée à grille-notes ; elle n’est pas appliquée au tableau.

Grid organise la présentation des articles. Le tableau exprime une relation de données. Les deux notions utilisent des lignes et colonnes, mais n’ont pas la même fonction.

4. Garder À propos et Contact simples

À propos possède un titre et son paragraphe de présentation : lui imposer une grille serait inutile. Contact garde l’ordre nom, e-mail, téléphone, préférence de contact, message, copie, bouton.

La présence de styles.css dans les trois pages ne signifie pas que tous ses sélecteurs correspondent partout. Grille-notes n’a d’effet que là où cette classe existe.

5. Vérifier le site avant les adaptations conditionnelles

Sur chaque page, activez les liens du menu et revenez à l’accueil. Avec le zoom, le menu peut revenir à la ligne et les notes peuvent s’empiler. Le texte de l’image et la légende du tableau restent dans le document.

Une technologie d’assistance continue à lire l’ordre HTML. Nous n’ajoutons ni ordre visuel inversé ni positionnement manuel des notes. Ces vérifications préparent le prochain chapitre : quand une adaptation naturelle ne suffit pas, nous saurons modifier seulement le composant concerné avec une media query.

Les deux composants conservent leurs règles distinctes :

.navigation-principale {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.grille-notes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: 1rem;
}

Ils coexistent dans la même feuille, sans être appliqués à tout le contenu.

Étape 1

Dans index.html, vérifiez le début et la fin du div grille-notes : seuls les deux articles doivent être dedans.

Étape 2

Parcourez le tableau et vérifiez la présence de sa légende et de ses en-têtes. N’ajoutez pas display: grid sur table.

Étape 3

Ouvrez apropos.html puis contact.html et vérifiez qu’aucune classe grille-notes n’y a été ajoutée sans besoin.

Étape 4

Réduisez la fenêtre et augmentez le zoom sur l’accueil. Les deux notes gardent leur séquence.

Étape 5

Expliquez le choix Flexbox pour le menu et Grid pour les notes, sans affirmer qu’un outil serait obligatoire pour toute la page.

Le chapitre Grid est terminé. La navigation et les notes sont deux composants distincts du même site. Ni le tableau, ni le formulaire, ni la page À propos n’ont été transformés pour démontrer une propriété inutile.