Adapter la grille et la navigation aux petits écrans

Sur un écran large, les horaires, les conseils et le contact peuvent tenir côte à côte. Sur un téléphone, ces colonnes deviennent trop étroites : les textes se tassent et la navigation manque de place. Vous allez définir une présentation de base adaptée aux petits écrans, puis rétablir la disposition en plusieurs colonnes lorsque le contenu dispose d’assez d’espace.

Partir d’une structure lisible sur mobile

Une media query applique des règles CSS seulement lorsque les conditions indiquées sont satisfaites. Ici, vous écrivez d’abord les règles pour une largeur étroite, puis vous ajoutez une media query avec min-width pour activer la disposition large. Cette organisation évite de commencer par une mise en page complexe qu’il faudrait ensuite défaire sur téléphone.

Le point de rupture ne doit pas être choisi uniquement parce qu’une largeur d’écran est courante. Il doit correspondre au moment où votre navigation ou vos colonnes commencent à manquer d’espace. Dans l’exemple, vous vérifierez le rendu en réduisant progressivement la fenêtre et ajusterez la valeur de 48rem si le contenu se serre avant ou après ce seuil.

Réorienter la navigation

La navigation utilise Flexbox pour aligner le nom de l’atelier et ses liens. Vous connaissez déjà la répartition de ces éléments avec justify-content, gap et flex-wrap ; ici, le changement porte sur l’orientation. Sur petit écran, flex-direction: column place les éléments les uns sous les autres, tandis que la media query rétablit une ligne sur les écrans plus larges.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Atelier de jardinage</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="entete">
        <nav class="navigation" aria-label="Navigation principale">
            <a class="logo" href="#accueil">Atelier Jardin</a>
            <a href="#horaires">Horaires</a>
            <a href="#conseils">Conseils</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>
    <main class="page" id="accueil">
        <section class="horaires" id="horaires">
            <h1>Atelier de jardinage</h1>
            <p>Retrouvez-nous le samedi, de 9 h à 12 h.</p>
        </section>
        <section class="conseils" id="conseils">
            <h2>Conseils pratiques</h2>
            <article class="carte"><h3>Préparez le sol</h3><p>Aérez la terre avant de planter.</p></article>
            <article class="carte"><h3>Arrosez au bon moment</h3><p>Privilégiez le matin pour limiter l’évaporation.</p></article>
        </section>
        <aside class="contact" id="contact">
            <h2>Contact</h2>
            <p>Écrivez à [email protected].</p>
        </aside>
    </main>
</body>
</html>

Empiler puis rétablir les colonnes de la grille

La structure HTML reste la même aux deux largeurs : vous ne dupliquez ni les horaires, ni les conseils, ni le contact. La grille utilise les zones nommées établies dans la leçon « Placer les zones de la page » ; vous les redéfinissez dans la media query pour changer leur disposition. Sur mobile, les trois zones s’empilent dans un ordre vertical, puis la grille passe à deux colonnes quand l’espace le permet.

/* Feuille de styles de l’atelier de jardinage */
:root {
    --couleur-fond: #f4f7ef;
    --couleur-texte: #243124;
    --couleur-accent: #356b3f;
    --espace: 1rem;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--couleur-texte);
    background: var(--couleur-fond);
    font-family: sans-serif;
}

.entete,
.page {
    padding: var(--espace);
}

.navigation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espace);
}

.navigation a {
    color: var(--couleur-accent);
}

.logo {
    font-weight: bold;
}

.page {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "horaires"
        "conseils"
        "contact";
    gap: var(--espace);
}

.horaires {
    grid-area: horaires;
}

.conseils {
    grid-area: conseils;
}

.contact {
    grid-area: contact;
}

.carte {
    margin-block: var(--espace);
    padding: var(--espace);
    background: white;
}

@media (min-width: 48rem) {
    .navigation {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .page {
        grid-template-columns: 2fr 1fr;
        grid-template-areas:
            "horaires contact"
            "conseils contact";
    }
}

Sous 48rem, la navigation s’affiche en colonne et les trois zones de la page s’empilent. À partir de 48rem, la navigation s’aligne sur une ligne ; les horaires et les conseils occupent la colonne principale, et le contact se place dans la colonne latérale.

Dans la grille étroite, chaque ligne contient une seule zone. Dans la règle large, la première colonne est deux fois plus large que la seconde : les horaires et les conseils restent ainsi prioritaires, tandis que le contact partage la hauteur des deux lignes. Les noms de zones doivent correspondre aux éléments associés avec grid-area ; si vous modifiez un nom dans la disposition, vérifiez aussi son association CSS.

Vérifier le changement de disposition

Enregistrez les deux fichiers, puis ouvrez la page dans le navigateur. Réduisez la fenêtre : les liens doivent se placer en colonne et les zones doivent s’empiler dans l’ordre défini. Élargissez-la au-delà du point de rupture : les liens reviennent sur une ligne et le contact rejoint la colonne latérale.

Si la navigation tient encore confortablement sur une ligne à une largeur inférieure à 48rem, le seuil peut être réduit. Si les libellés se rapprochent ou si les colonnes de la page deviennent trop étroites avant ce seuil, augmentez-le. L’objectif est un changement au moment où le contenu en a besoin, pas l’ajout de plusieurs règles pour chaque taille d’appareil.

À retenir

• Écrivez d’abord une disposition étroite et lisible, puis ajoutez les règles larges dans une media query.
• Utilisez flex-direction pour orienter la navigation selon la largeur disponible.
• Redéfinissez les colonnes et les zones de grille sans dupliquer le contenu HTML.
• Choisissez le point de rupture en observant quand le contenu manque d’espace, puis vérifiez la page de part et d’autre du seuil.