PhpBB Lab Académie

Créer une grille pour les deux articles existants sous Mes notes de progression, comprendre ses colonnes et conserver le titre de section hors de cette grille.

Le besoin précis dans l’accueil

La section Mes notes de progression possède deux articles complets : Ma première page complète et Mon formulaire de contact. Nous allons les présenter côte à côte sur une largeur suffisante, tout en gardant leur h2 au-dessus.

Les trois autres sections, l’image, le tableau, la page À propos et le formulaire ne doivent pas devenir des éléments de cette grille.

1. Ajouter un conteneur neutre autour des deux articles

Nous découvrons div, un élément HTML de regroupement sans rôle thématique propre. Il est approprié ici pour un besoin de présentation ; nous conservons la section thématique et son h2.

Dans index.html, juste après le h2 Mes notes de progression, ouvrez <div class="grille-notes">. Fermez ce div après le deuxième article, avant la fermeture de section. Les deux articles existants sont donc ses enfants directs. L’exemple donne la section entière, sans contenu à deviner.

N’appliquez pas Grid directement à tout main : le h1, l’image et le tableau n’appartiennent pas à cette rangée de notes.

2. Activer Grid sur ce parent

Avec display: grid, le div devient un conteneur de grille. Les deux article deviennent ses éléments de grille. Comme avec Flexbox, leurs h3 et p restent à l’intérieur de ces articles, pas directement dans la grille.

Ajoutez :

.grille-notes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

3. Lire les colonnes

grid-template-columns définit les colonnes. fr est une unité de partage de l’espace disponible pour les pistes flexibles. Avec 1fr 1fr et notre contenu ordinaire, deux colonnes se partagent cet espace à égalité, une fois le gap pris en compte.

Les contraintes minimales du contenu peuvent influencer le résultat : 1fr n’est pas une promesse universelle qu’aucun mot ne pourra déborder. Nous rendrons ce modèle plus souple dans la prochaine leçon.

Les éléments sont placés dans l’ordre : Ma première page complète dans la première colonne, Mon formulaire de contact dans la seconde. Si une grille contient plus d’éléments que de colonnes, des lignes supplémentaires peuvent être créées automatiquement.

4. Confier les intervalles à la grille

Gap fonctionne aussi avec Grid, entre les lignes et colonnes. Dans .note-progression, remplacez margin-bottom: 1rem; par margin-bottom: 0;. La grille gère désormais la séparation entre ces articles.

Gardez leur padding, leur fond et leur bordure. Le modèle de boîte ne disparaît pas parce que les articles deviennent des éléments de grille.

5. Contrôler le plan de l’accueil

Le h2 Mes notes de progression reste avant la grille et les deux h3 restent ses subdivisions. Le tableau Les pages de mon site reste hors de ce div ; il continue à représenter des données, pas une mise en page.

Cette première grille conserve deux colonnes même si la fenêtre devient trop étroite. Elle sert à comprendre les pistes ; l’étape suivante adaptera leur nombre au lieu de diminuer la taille du texte.

Référence technique, pour approfondir

W3C — CSS Grid, conteneurs et pistes

La section complète, construite à partir des deux notes HTML existantes :

<section>
    <h2>Mes notes de progression</h2>

    <div class="grille-notes">
        <article class="note-progression">
            <h3>Ma première page complète</h3>
            <p>J’ai appris à structurer une page avec header, nav, main, section et footer.</p>
        </article>

        <article class="note-progression">
            <h3>Mon formulaire de contact</h3>
            <p>J’ai appris à associer les labels aux champs et à choisir un type de saisie adapté.</p>
        </article>
    </div>
</section>

Étape 1

Dans index.html, ajoutez le div grille-notes autour des deux article, sous le h2 et à l’intérieur de la section. Gardez leurs textes et classes.

Étape 2

Ajoutez la règle .grille-notes avec display: grid;, grid-template-columns: 1fr 1fr; et gap: 1rem;.

Étape 3

Dans .note-progression, remplacez seulement margin-bottom par 0.

Étape 4

Sur une fenêtre large, vérifiez les deux notes côte à côte. Parcourez ensuite les titres : leur niveau et leur ordre doivent être inchangés.

Étape 5

Vérifiez que Mon espace de travail et le tableau ne se trouvent pas dans le nouveau div.

Grid définit ici deux colonnes pour les deux notes réelles. Le div ne remplace ni la section ni les articles. Le titre de section, l’image et le tableau ne sont pas inclus dans cette grille.