Définir les colonnes de la grille des conseils

Une liste de conseils peut être lisible sur un grand écran, puis devenir trop serrée quand la fenêtre rétrécit. Vous allez organiser ces conseils en colonnes sans fixer un nombre de cartes par ligne pour chaque largeur. La grille s’appuiera sur l’espace réellement disponible dans son conteneur.

Préparer les cartes de conseils

Dans le projet, les conseils sont des éléments répétés : semer au bon moment, arroser efficacement et protéger les jeunes plants. Placez-les dans un même conteneur HTML. Avec display: grid, ce conteneur devient le conteneur Grid et ses enfants directs deviennent les éléments Grid ; ce sont les cartes qui seront distribuées en colonnes.

<section class="conseils">
    <h2>Conseils pratiques</h2>
    <div class="conseils__grille">
        <article class="carte">
            <h3>Semez au bon moment</h3>
            <p>Vérifiez la période adaptée à chaque variété avant de semer.</p>
        </article>
        <article class="carte">
            <h3>Arrosez régulièrement</h3>
            <p>Arrosez au pied des plantes et adaptez la fréquence à la météo.</p>
        </article>
        <article class="carte">
            <h3>Protégez les jeunes plants</h3>
            <p>Surveillez les nuits fraîches et protégez les plants fragiles.</p>
        </article>
    </div>
</section>

La règle Grid s’applique à .conseils__grille, pas à chaque carte individuellement. La section et son titre restent ainsi hors de la grille des cartes. Vous pouvez conserver vos styles typographiques existants et ajouter les règles de disposition à la feuille unique style.css.

Définir des colonnes adaptables

grid-template-columns décrit les colonnes de la grille. La fonction repeat() évite de recopier une même définition plusieurs fois : repeat(3, 1fr) crée trois colonnes de largeur égale. Cette version impose toutefois trois colonnes, même si le conteneur devient étroit.

Pour laisser le navigateur déterminer combien de colonnes peuvent tenir, combinez repeat() avec auto-fit. Définissez aussi une largeur minimale et maximale pour chaque colonne avec minmax(). La règle suivante demande des colonnes d’au moins 15rem, qui peuvent s’étirer pour partager l’espace restant.

:root {
    --couleur-texte: #24352b;
    --couleur-carte: #f1f5ed;
    --espace: 1rem;
}

.conseils__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--espace);
}

.carte {
    padding: var(--espace);
    color: var(--couleur-texte);
    background-color: var(--couleur-carte);
    border-radius: 0.5rem;
}

Quand la largeur le permet, les cartes se placent sur une même rangée en colonnes de largeur égale. Quand une colonne de plus ne peut pas atteindre 15rem, elle passe à la rangée suivante.

La valeur 1fr représente une fraction de l’espace disponible. Ici, chaque colonne reçoit une fraction égale après prise en compte de sa largeur minimale et des espacements entre colonnes. auto-fit permet à Grid d’utiliser les colonnes qui tiennent dans la largeur, puis d’étendre celles qui restent pour remplir la rangée.

Vérifier le comportement

Enregistrez la feuille de styles et examinez la page dans le navigateur. Sur un conteneur assez large, les trois cartes de l’exemple peuvent tenir sur une rangée ; réduisez progressivement la fenêtre et observez le moment où une carte passe à la rangée suivante. Le nombre de colonnes est déterminé par la place disponible, et non par une règle distincte pour chaque taille d’écran.

Si votre mise en page actuelle utilise Flexbox pour la navigation, gardez cette organisation : comme vu dans la leçon « Répartir les éléments de la navigation », Flexbox répartit les liens selon l’axe de la barre. Ici, vous utilisez Grid pour définir une structure répétée en colonnes. Vous n’avez donc pas besoin de remplacer la navigation pour créer la grille des conseils.

À retenir

• Appliquez display: grid au conteneur qui regroupe les cartes ; ses enfants directs deviennent les éléments Grid.
• Utilisez grid-template-columns pour décrire les colonnes, et repeat() pour répéter leur définition.
• Combinez auto-fit et minmax() pour ajuster le nombre de colonnes à l’espace disponible.
• Réglez la largeur minimale de minmax() en fonction du contenu, puis vérifiez la disposition à plusieurs largeurs.

Dans la prochaine leçon, vous placerez les différentes zones de la page de l’atelier à l’aide de Grid.