Construire les zones de contenu

Une page peut contenir les bonnes informations tout en restant difficile à parcourir si ses blocs sont mal organisés. Vous allez disposer les horaires et les conseils de l’atelier de jardinage de façon lisible, puis placer les informations de contact sans recourir à des espacements artificiels.

Vous avez déjà ciblé des éléments avec des sélecteurs et utilisé des règles CSS dans les leçons précédentes. Ici, vous allez choisir entre deux méthodes de disposition : Flexbox convient aux éléments alignés principalement sur un axe, tandis que Grid organise les éléments en lignes et en colonnes.

Choisir une disposition adaptée

Flexbox distribue les éléments d’un conteneur le long d’un axe principal. Avec flex-direction: row, cet axe va horizontalement ; avec column, il va verticalement. justify-content règle la répartition sur l’axe principal, align-items l’alignement sur l’axe secondaire et gap l’espace entre les éléments.

Grid est utile quand vous souhaitez maîtriser plusieurs colonnes, par exemple pour placer côte à côte les horaires et les conseils. La valeur 1fr indique une fraction de l’espace disponible : deux colonnes définies par 1fr 1fr se partagent cet espace également. Vous pouvez faire occuper plusieurs colonnes à un bloc avec grid-column.

Préparer les zones de la page

La page ci-dessous contient un en-tête, une zone principale avec les horaires et les conseils, puis un contact. Les deux panneaux de contenu sont des enfants directs de .contenu : ce conteneur pourra donc les organiser ensemble avec Grid. Dans le panneau des horaires, Flexbox répartira les créneaux sur une ligne avec un espacement régulier.

<!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">
        <h1>Atelier de jardinage</h1>
        <p>Apprenez à cultiver votre jardin, saison après saison.</p>
    </header>
    <main>
        <section class="contenu" aria-label="Informations pratiques">
            <section class="panneau" id="horaires">
                <h2>Horaires</h2>
                <div class="creneaux">
                    <p><strong>Mercredi</strong><br>14 h – 16 h</p>
                    <p><strong>Samedi</strong><br>10 h – 12 h</p>
                </div>
            </section>
            <section class="panneau" id="conseils">
                <h2>Conseils pratiques</h2>
                <ul>
                    <li>Prévoyez des gants de jardinage.</li>
                    <li>Apportez un carnet pour prendre des notes.</li>
                    <li>Les outils sont fournis sur place.</li>
                </ul>
            </section>
        </section>
        <section class="contact" id="contact">
            <h2>Contact</h2>
            <p>Pour vous inscrire, écrivez à <a href="mailto:[email protected]">[email protected]</a>.</p>
        </section>
    </main>
</body>
</html>

Enregistrez ce document dans votre dossier sous index.html, puis créez à côté le fichier style.css. Le lien dans l’en-tête du document relie les deux fichiers ; conservez ces noms de fichiers pour que les styles soient chargés.

Organiser les blocs avec Grid et Flexbox

:root {
    --couleur-fond: #f3f7ef;
    --couleur-panneau: #ffffff;
    --couleur-texte: #243329;
    --couleur-accent: #356b45;
    --espace: 1.5rem;
}

* {
    box-sizing: border-box;
}

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

.entete {
    padding: var(--espace);
    background-color: var(--couleur-accent);
    color: var(--couleur-panneau);
    text-align: center;
}

main {
    width: min(100% - 2rem, 60rem);
    margin: 2rem auto;
}

.contenu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espace);
}

.panneau,
.contact {
    padding: var(--espace);
    background-color: var(--couleur-panneau);
    border: 1px solid #d4dfd2;
}

.creneaux {
    display: flex;
    justify-content: space-between;
    gap: var(--espace);
}

.creneaux p {
    margin: 0;
}

.contact {
    margin-top: var(--espace);
}

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

@media (max-width: 40rem) {
    .contenu {
        grid-template-columns: 1fr;
    }

    .creneaux {
        flex-direction: column;
    }
}

La règle .contenu transforme la zone en grille à deux colonnes de même largeur. La propriété gap crée l’espace entre les panneaux sans ajouter de marges à chacun. Sur un écran étroit, la requête média déjà abordée dans la leçon sur l’adaptation aux écrans remplace ces colonnes par une seule ; les panneaux restent alors lisibles l’un sous l’autre.

Dans .creneaux, Flexbox place les deux paragraphes côte à côte et répartit l’espace entre eux. La règle de petit écran change l’axe principal en colonne : les créneaux s’empilent sans modifier le HTML. Le bloc de contact reste sous la grille, car il se trouve après .contenu dans le document et n’est pas un de ses éléments enfants.

À retenir

• Utilisez Flexbox pour aligner et répartir des éléments principalement dans une direction.
• Utilisez Grid pour organiser des blocs en lignes et en colonnes.
• Appliquez la disposition au conteneur dont les enfants directs doivent être organisés.
• Servez-vous de gap pour espacer les éléments sans multiplier les marges.
• Adaptez le nombre de colonnes et l’axe de Flexbox aux petits écrans.

Dans la leçon suivante, vous finaliserez la page en vérifiant son rendu à plusieurs largeurs et ses liens.